Html的Canvas主要通过js脚本做一些图形化操作。Canvas是一个矩形区域,您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
如果有个需求,我们只想要用户相册图片中某个区域的内容,其余区域设为透明?
实现
先改变图片的大小
使用一个开源的canvas库pica。
// Resize from Canvas/Image to another Canvaspica.resize(from, to, { unsharpAmount: 80, unsharpRadius: 0.6, unsharpThreshold: 2}) .then(result => console.log('resize done!'));
测试效果
实现图片的蒙版
图片蒙版主要是图片的叠加模式进行处理,参考以下链接
图片组合类型
ctx.save(); ctx.drawImage(mask_img, 0, 0); ctx.globalCompositeOperation = "source-in"; ctx.drawImage(our_img, 0, 0); ctx.restore();
mask.png
our_img
蒙版效果图
关于如何生成gif图,使用gif.js库。
var gif = new GIF({ workers: 2, quality: 10, background: "#ffffff00", transparent:"ff0000" }); gif.addFrame(img1); gif.addFrame(img2); gif.on('finished', function(blob) { // window.open(URL.createObjectURL(blob)); var url = URL.createObjectURL(blob); document.getElementById("gif").setAttribute("src",url) }); gif.render();
最后
这里主要介绍了一些前端对图片处理的操作。
点击查看更多内容
为 TA 点赞
评论
共同学习,写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦