canvas生成二维码海报-canva绘制海报01：canvas绘制图片并解决导出后略模糊问题

<button id="capture">截屏</button>

<div id="qrcode" style="width: 0; height: 0; line-height: 0;overflow: hidden;"></div>

<div id="screenshoot"></div>

<script>

('DOMContentLoaded', function(e) {

const qrcode = new QRCode('qrcode', {

text: ,

});

();

const capture = ('#capture');

('click', function() {

html2canvas().then(function(canvas) {

const ctx = ('2d');

(('#qrcode img'), 0, 0);

(canvas);

});

})

});

</script>

另外,

img 标签和 js 中的image 都建议增加 crossorigin = "anonymous" 属性

**注意: **有部分网友评论('crossOrigin', 'anonymous') 必须是写 在你赋值 之前,所以楼主写法有误 可以看看这个链接 去看看, #27260385

效果图如下:

模糊在线demo

解决方案:

1.首先一样,获取 Canvas 对象:

2.获取像素比,将 Canvas 宽高进行放大,放大比例为:devicePixelRatio / webkitBackingStorePixelRatio , 我们写了一个兼容的方法。

3.按实际渲染倍率来缩放canvas。

注意基础知识点:

要设置canvas的画布大小,使用的是 和 ;

要设置画布的实际渲染大小,使用的 style 属性或CSS设置的 width 和height,只是简单的对画布进行缩放。

4.绘制

效果图如下

优化后不模糊的在线demo

参考链接:

一个关于image访问图片跨域的问题,

解决 canvas 将图片转为base64报错: Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported,

解决 canvas 在高清屏中绘制模糊的问题,

你的这个小程序不太清楚是什么,我议案做条码二维码用的是条码软件,里面做的条码二维码清晰度和有效期都能自己控制,除非是你在二维码中添加的网址,这个有效期是网页控制,操作起来也挺简单的,和平时用的办公软件差不多:

你可以看下,这个里面的类型还挺多的, 条码有上百种,二维码是好几十种