需求在开发过程中面临这样的需求，h5页面需要将一个html dom转换为图像，方便用户存储。
用于百度搜索的第三方html2canvas和dom-to-image在写本笔记本之前在github上的星星数都是多少
dom-to-image 4k
html2canvas 13.7k
两个都试过。 有意想不到的错误。 包括以下内容
有些手机不能展示背景图片，空白的iphone8 plus ios 11完全不调用这种转换方法，得不到想要的图片。 等一下
您可以自行考虑利用canvas的toDataurl获取canvas转换的base64代码，替换img的URL，也可以将图像上传到公司服务器，获得图像地址并下载，或者作为参数传递
在中，canvas的绘制主要是文本和图像的绘制，文本的绘制比较简单，图像的绘制有几个注意事项。
canvas初始化由于最后生成的图片可能会模糊，可以尽量画大一点画布，可以按照设计图来
canvas id=' canvas ' width=' 750 ' height=' 1164 '你的浏览器不支持canvas吗？ 快点交换吧！/canvasletc=document.getelementbyid (canvas )； letCTX=c.getcontext('2d )； 如图所示，用文本绘制正式文档
详细文档包括canvas手册代码示例ctx.fillStyle='#fff '； CTX.font=' 32 pxpingfangsc-regular '； ctx.textAlign='left '； ctx.fillText (这是几个字符(，280，755 )； 照片如图所示描绘官方文档
有关详细信息，请参阅canvas文档中的注意事项图像。 需要跨域处理。 否则，以后无法生成图像。 也就是说，将crossOrigin属性添加到img标记中。 值为anonymousconstinstbanner=document.getelementbyid ' inst banner ' inst banner.cross origin=' anonymous '； 必须在图像加载完成后在画布上绘制。 否则，可能没有绘制const posterBg=new Image ()。 posterBg.src=mainBg； posterBg.onload=() CTX.Drawimage ) posterBG，0，0，750，1164 )； }完整代码示例const posterBg=new Image (； posterBg.src='https: '； //这里是照片urlposterbg.cross origin=' anonymous '； posterBg.onload=() CTX.Drawimage ) posterBG，0，0，750，1164 )； }图像替换imgsrcletdataurl=c.todataurl (image/png )； letcanvasimg=document.getelementbyid (canvas img )； canvas.src=数据URL； 上传到服务器并使用img url (可用作参数并保存图像) letdataURL=c.todataurl () image/png )； 函数时间(数据URL )//某些上载服务器的代码返回图像(letimgurl=getimgurl )； letcanvasimg=document.getelementbyid (canvas img )； canvas.src=imgUrl； 最后几种常用的canvas处理方法的圆形图像绘制ctx.save (； ctx.beginPath (； //开始绘制圆//用前两个参数确定圆心(x，y )坐标的第三个参数是圆的半径4参数，绘制方向的默认值为false，按顺时针方向绘制CTX.arc (60，60，30，0 * Marc ctx.clip (； //画一个圆，从原始画布上剪切任意形状和尺寸。
剪切区域时，后续的所有绘制都限制在剪切的区域内。 这是需要ctx.drawimage(https: )、30、30、60、60 )和60 )上下文的原因。 contex.restore (； //还原前保存的绘图上下文还原前保存的绘图下午即状态圆角矩形绘图也可以继续/**该方法是圆角矩形*@param cxt:canvas的上下文环境*@param x:左上角的x轴坐标@param y:左上角的y轴坐标* @param width:矩形的宽度*@param height:矩形的高度*@param radius:圆的半径*@param lineWidth:线的粗细* @ PPP functionstrokeroundrect(cxt、x、y、width、height、radius、/*optional*/lineWidth、/*optional*/strokeColor ) CXT.translate(x，y )； //绘制圆角矩形各边的drawroundrectpath(cxt、width、height、radius )； cxt.lineWidth=lineWidth||2； //如果给定了值，就使用给定的值。 否则默认值2c XT.stroke style=stroke color|| ' # 000 '； cxt.stroke (； cxt.restore (； } /**此方法用于填充颜色的圆角矩形*@param cxt:canvas的上下文环境*@param x:左上角的x轴坐标*@param y:左上角的y轴坐标*@param width:矩形@ paramheighhhhhhhhh @ param radius :日元的半径*@param fillColor:填充颜色**/functionfillroundrect(cxt，x，y，y，width，) CXT.translate(x，y )； //绘制圆角矩形各边的drawroundrectpath(cxt、width、height、radius )； cxt.fillStyle=fillColor||'#000 '； //如果给定了值，就使用给定的值。 否则为默认值cxt.fill (； cxt.restore (； }functiondrawroundrectpath(cxt，width，height，radius ) cxt.beginpath ) 0； //从右下角顺时针绘制，弧度为0到1/2 picxt.arc (宽度radius，高度radius，radius，0，Math.PI/2 )； //矩形下边线cxt.Lineto(radius，height )； //左下角圆弧、弧度为1/2PI至picxt.arc(radius、height-radius、radius、Math.PI/2、Math.PI )； //矩形左线cxt.Lineto(0，radius )； //左上角的圆弧、弧度为PI至3/2picxt.arc(radius、radius、radius、Math.PI、Math.PI*3/2)； //上侧CXT.Lineto(Width-Radius，0 )； //右上圆弧cxt.arc(width-radius，radius，radius，Math.PI*3/2，Math.PI*2)； //右边线cxt.Lineto(Width，height-radius )； cxt.closePath (； 点击阅读原文