canvas生成自定义大小图片 |
您所在的位置：网站首页 › canvas转换图片 › canvas生成自定义大小图片 |
canvas生成自定义大小图片
|
场景：比如移动端签名，一张canvas画布，在任意位置书写之后，生成一张图片，如果这种图片要放到某一个签名的位置会显的特别大，我们来解决这个问题 一、生成canvas图片 通过 canvas.toDataURL('image/png', 1) 生成一张base64的canvas图片，也可以是你自己的其他图片
二、将原图转换为自定义大小的图片 /** * resize 生成自定义大小的图片 * @param {String} datas 图片原文件 * @param {Number} wantedWidth 修改后的宽度 * @param {Number} wantedHeight 修改后的高度 * @returns */ function resizedataURL(datas, wantedWidth, wantedHeight){ return new Promise(async function(resolve,reject){ var img = document.createElement('img'); img.onload = function() { var canvas = document.createElement('canvas'); var ctx = canvas.getContext('2d'); canvas.width = wantedWidth; canvas.height = wantedHeight; ctx.drawImage(this, 0, 0, wantedWidth, wantedHeight); var dataURI = canvas.toDataURL(); resolve(dataURI); }; img.src = datas; }) }三、调用方法 // 生成一张大小为 255 * 250 的图片 var newDataUri = await this.resizedataURL(canvas.toDataURL('image/png', 1), 255, 250); var encodeImages = encodeURI(newDataUri);最后encodeImages即为你自定义大小的图片文件 交流 1、QQ群：可添加qq群共同进阶学习： 进军全栈工程师疑难解 群号: 856402057 2、公众号：公众号「进军全栈攻城狮」 ，对前端技术保持学习爱好者。我会经常分享自己所学所看的干货，在进阶的路上，共勉！ |
【本文地址】
今日新闻 |
推荐新闻 |