canvas 免费下载2维码和照片加水印的方式

2021-02-23 08:07 jianzhan

昨日详细介绍了1个转化成2维码的软件QRCode.js,它是依靠HTML5 Canvas绘图而成。因此,今日的主角便是canvas啦–canvas的具体运用。

1、免费下载2维码(查询怎样转化成2维码

HTMLCanvasElement出示了toDataURL方式,该方式回到1个包括被种类主要参数要求图象主要表现文件格式的data URI。根据该方式大家便可以转化成2维码照片并免费下载了。示比如下:

/*html*/
<div id="qrcode">div>
<a href="javascript:;" download="2维码" id="down">免费下载2维码</a>

/*js*/
var canvas = document.getElementsByTagName('canvas')[0];
var downImg = document.getElementById('down')
img.href = document.getElementsByTagName('canvas')[0].toDataURL('image/png')

2、照片加水印

运用canvas的fillText和drawImage方式能够轻轻松松完成给照片加水印。示比如下:

/*html*/
<canvas id="canvas"></canvas>

/*js*/
var img = new Image();   // 建立img元素
var canvas = document.getElementById('canvas')
var ctx = canvas.getContext('2d');
img.src = 'myImage.png';

img.onload = function(){
    ctx.drawImage(img, 0, 0);
    ctx.font="30px yahei";   //设定水印文本
    ctx.fillText("大前端开发", 1100, 260)
}

今日临时写到这里,欢迎共享有关canvas的别的运用。期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。