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

<img src="......." id="img1" />

<img src="......." id="img2" />

<img id="img3" />

var img1 = ("img1"),

    img2 = ("img2"),

    img3 = ("img3");

var canvas = ("canvas"),

    context = ("2d");

 =  + ;

 = (,);

// 将 img1 加入画布

(img1,0,0,,);

// 将 img2 加入画布

(img1,,0,,);

// 将画布内容导出

var src = ();

 = src;

<p>drawImage 的使用方法可以去这里看一下</p>

<a href="" />

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)声明画布

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

插入图片

let imgInstance = 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)画矩形

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

add(obj) 添加图形

(rect)

10)remove(obj) 移除图形

11)set() 设置对象内容

12)toDataURL(obj)

4.原生canvas实现代码

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

' ('width', ) ('height', ) let self = this = () => { let beginX, beginY, endX, endY (Img, 0, 0) () ('mousedown', e => { beginX = e.offsetX beginY = e.offsetY ('mouseup', e => { endX = e.offsetX endY = e.offsetY if () { (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 = strokeStyle fillStyle && ( = fillStyle) globalAlpha && ( = globalAlpha) () () }, // 打马赛克 mosaic () { let self = this () = true }, makeGrid (beginX, beginY, rectWidth, rectHight) { const row = (rectWidth / ) + 1 const column = (rectHight / ) + 1 for (let i = 0; i < row * column; i++) { let x = (i % row) * + beginX let y = parseInt(i / row) * + beginY (x, y) } }, setColor (x, y) { const imgData = (x, y, , ).data let r = 0, g = 0, b = 0 ((x, y, , ), (imgData)) for (let i = 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', ) // } const x = / 2 const y = / 2 (0,0, , ) // 清理画布内容 (x, y) (90 * / 180) (-x, -y) (, 0, 0) }, resetClickStatus () { = false = false = false = false }, exportImg () { () const exportUrl = ("image/jpeg") let a = ('a') a.setAttribute('download', '') a.href = exportUrl (a) a.click() } } }</script><style scoped lang="less">.operations { width: 1200px; margin: 0 auto; ul { display: flex; align-items: center; margin-bottom: 30px; li { list-style: none; margin-right: 20px; cursor: pointer; } }}.img-wrap { display: block; margin: 0 auto;}</style>

JScript codevar canvas = ("mycanvas");

var img = ("image/png");

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

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

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