canvas代码生成,canvas 图片合成

　　上个版本街道一个需求，使用全球资源定位器(统一资源定位器)生成一个二维码，然后和另外一张图片合成一张图拍你，

　　实现思路是这样的

　　使用Jr-二维码将全球资源定位器(统一资源定位器)生成数据：base64供图片使用然后使用帆布将两张图合成一张图片遇到的问题

　　生成图片之后发现图片很模糊，解决办法是将帆布画布扩大两倍，其他参数也夸大两倍就可以了

　　Jr-二维码可以使用新公共管理安装-保存Jr-二维码安装这个包

　　作用就是可以转化文本到数据：base64供图片的科学研究委员会使用

　　代码如下

　　import React，{ Component } from React const QR code=require( Jr-QR code )const load img=(src)={ const paths=array。是数组(src)？src:[src]；const promise=[]；路径。foreach((path)={ Promise。push(new Promise((resolve，reject)={ let img=new Image()；img . cross origin= anonymous img . src=path img。onload=()={ resolve(img)；};img.onerror=(err)={ console.log(图片加载失败) } })) });返回无极. all(承诺);}const getImageData=(url，src)={ const img src=二维码。getqrbase 64(URL)let canvas=document。createelement(“canvas”)const width=document。文档元素。客户端宽度常数高度=文档。文档元素。客户高度画布。宽度=宽度* 2画布。高度=高度* 2让CTX=画布。获取上下文( 2d )加载img([img src，src]).然后(([img1，img2])={ ctx.drawImage(img2，0，0，width*2，height*2) ctx.drawImage(img1，width-80，height*2-220，200，160) ctx.fillStyle=rgba(0，0，0，0.3)；ctx.fillRect(宽度-80,高度*2-60,200,40);CTX。拯救()CTX。CTX。填充样式= # fffctx.fillText(长按识别二维码，宽度-80，高度*2-30，200，160)设imageURL=canvas。toda aurl( image/png )文档。getelementbyid( mix _ img ).setAttribute(src ，imageURL)} }导出默认类二维码扩展组件{ render() { const { url，pic src }=this。props getImageData(URL，pic src)return(div img alt= mix _ img id= mix _ img //div)} }以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。