在线绘制canvas导出代码-html5中canvas画的图形如何打印以及导出pdf？

Question

如题所述

Answer 1

HTML5如何通过canvas，把两张图片绘制到画布，然后导出大图

<img_rc="......."_d="img1"/>

<img_rc="......."_d="img2"/>

<img_d="img3"/>

var_mg1=("img1"),

__img2=("img2"),

__img3=("img3");

var_anvas=("canvas"),

__context=("2d");

=_+;

=(,);

//__img1_尤牖

(img1,0,0,,);

//__img2_尤牖

(img1,,0,,);

//_寄谌莸汲

var_rc=();

=_rc;

<p>drawImage_氖褂梅椒?梢匀フ饫锟匆幌</p>

<a_ref=""/>

canvas加入代码是什么

1.原生canvas实现用到的API

1)getContext(contextID)---返回一个用于在画布上绘图的环境

复制代码代码如下:('2d')//返回一个CanvasRenderingContext2D对象,使用它可以绘制到Canvas元素中

2)drawImage

drawImage(imgObj,x,y)//按原图大小绘制,x、y为图片在画布中的位置坐标drawImage(imgObj,x,y,width,height)//按指定宽高绘制drawImage(imgObj,sourceX,sourceY,sourceWidth,sourceHeight,destX,destY,destWidth,destHeight)//从原来图片上某一个位置开始(sourceX,sourceY),指定长宽进行剪切(sourceWidth,sourceHeight),然后将剪切的内容放到位置为(destX,destY),宽度为(destWidth),高度为(destHeight)的位置上

3)getImageData(x,y,width,height)---获取矩形区域的图像信息

(0,0,10,10)//获取左上角坐标为(0,0),宽高为区域内的图像信息//返回ImageData:{width:10,height:10,data:Uint8ClampedArray[400]}

4)beginPath()---开始一条路径,或重置当前的路径5)rect(x,y,width,height)---绘制矩形

6)lineWidth---设置或返回当前线条的宽度

7)fillStyle---设置或返回用于填充绘画的颜色、渐变或模式

=color|gradient|pattern

8)strokeStyle---设置或返回用于笔触的颜色、渐变或模式

9)globalAlpha---设置或返回绘图的当前透明值

10)fill()---填充当前的图像(路径)。默认颜色是黑色

【注】如果路径未关闭,那么fill()方法会从路径结束点到开始点之间添加一条线,以关闭该路径,然后填充该路径。

11)stroke()---会实际地绘制出通过moveTo()和lineTo()方法定义的路径。默认颜色是黑色

12)toDataURL(type,encoderOptions)---导出图片,type为图片类型,encoderOptions图片质量,[0,1]

("image/png",1)

2.

简化canvas编写的库,为canvas提供所缺少的对象模型

能做的事

1)在canvas上创建、填充图形(包括图片、文字、规则图形和复杂路径组成图形)

2)给图形填充渐变颜色

3)组合图形(包括组合图形、图形文字、图片等)

4)设置图形动画集用户交互

5)生成JSON,SVG数据等

3.使用实现用到的API

1)声明画布

letcanvas=new('canvas'){width:200,height:200}

插入图片

letimgInstance=new(imgElement,{left:0,top:0,width:100,height:100,angle:0}

3)设置背景图片setBackgroundImage

(imgInstance)

4)renderAll()重新绘制

5)on()用户交互

('mouse:down',function(options){(options.e.clientX,options.e.clientY)})//监听事件

6)getPointer()

7)setWidth()、setHeight()设置canvas的宽高

8)画矩形

letrect=new({left:0,top:0,width:100,height:100})

add(obj)添加图形

(rect)

10)remove(obj)移除图形

11)set()设置对象内容

12)toDataURL(obj)

4.原生canvas实现代码

<template><divclass="container"><divclass="operations"><ul><li@click="mosaic">马赛克</li><li@click="addText">添加文字</li><li@click="tailor">裁剪</li><li@click="rotate">旋转</li><li@click="exportImg">导出图片</li></ul></div><canvasref="imgContent"class="img-wrap">你的浏览器太low????</canvas></div></template><script>exportdefault{data(){return{context:'',canvas:'',isMasic:false,isText:false,isTailor:false,isTranslate:false,squareEdgeLength:20,angle:0,img:''}},mounted(){()},methods:{initData(){letimgContent=this.$=imgContent=('2d')letImg=newImage()=Img="Anonymous"='

'('width',)('height',)letself=this=()=>{letbeginX,beginY,endX,endY(Img,0,0)()('mousedown',e=>{beginX=e.offsetXbeginY=e.offsetY('mouseup',e=>{endX=e.offsetXendY=e.offsetYif(){(beginX,beginY,endX-beginX,endY-beginY)return}if(){(Img,beginX,beginY,endX-beginX,endY-beginY,0,0,endX-beginX,endY-beginY)return}})})}},drawRect(x,y,width,height,fillStyle,lineWidth,strokeStyle,globalAlpha){()(x,y,width,height)=lineWidth=strokeStylefillStyle&&(=fillStyle)globalAlpha&&(=globalAlpha)()()},//打马赛克mosaic(){letself=this()=true},makeGrid(beginX,beginY,rectWidth,rectHight){constrow=(rectWidth/)+1constcolumn=(rectHight/)+1for(leti=0;i<row*column;i++){letx=(i%row)*+beginXlety=parseInt(i/row)*+beginY(x,y)}},setColor(x,y){constimgData=(x,y,,).dataletr=0,g=0,b=0((x,y,,),(imgData))for(leti=0;i<;i+=4){r+=imgData[i]g+=imgData[i+1]b+=imgData[i+2]}r=(r/(/4))g=(g/(/4))b=(b/(/4))(x,y,,,`rgb(${r},${g},${b})`,2,`rgb(${r},${g},${b})`)},//添加文字addText(){()=true('添加文字')},//裁剪tailor(){()=true('裁剪')},//旋转rotate(){//if(===360){//=90//}else{//+=90//}//if([90,270].includes()){//('width',)//('height',)//}else{//('width',)//('height',)//}constx=/2consty=/2(0,0,,)//清理画布内容(x,y)(90*/180)(-x,-y)(,0,0)},resetClickStatus(){=false=false=false=false},exportImg(){()constexportUrl=("image/jpeg")leta=('a')a.setAttribute('download','')a.href=exportUrl(a)a.click()}}}</script><stylescopedlang="less">.operations{width:1200px;margin:0auto;ul{display:flex;align-items:center;margin-bottom:30px;li{list-style:none;margin-right:20px;cursor:pointer;}}}.img-wrap{display:block;margin:0auto;}</style>

html5中canvas画的图形如何打印以及导出pdf？

JScriptcodevarcanvas=("mycanvas");

varimg=("image/png");

('<imgsrc="'+img+'"/>');

打印是浏览器的事。用JS调用也是调用浏览器的功能,这种情况直接按CTRL+P去处理。至于PDF,装软件,只要能打印的都可以通过软件生成PDF。

若想在HTML5里用纯代码实现导出PDF是实现不了的。