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 即为你自定义大小的图片文件

相关文章
|
11月前
|
开发者 UED
|
前端开发
914.【前端】Taro集成towxml渲染markdown文档
914.【前端】Taro集成towxml渲染markdown文档
933 2
|
移动开发 Android开发 HTML5
uniapp视频播放功能
uniapp视频播放功能
1483 0
|
11月前
|
UED
一些 CSS3 动画的实际应用案例
一些 CSS3 动画的实际应用案例
422 57
|
9月前
|
弹性计算 固态存储 大数据
2025阿里云服务器租赁价格表一年、1个月和1小时收费标准(200M峰值带宽)
阿里云服务器价格优惠,2025年最新租用费用表显示,轻量应用服务器2核2G配置一年仅需68元(秒杀38元),带200M峰值带宽。云服务器ECS方面,99元/年的2核2G经济型和199元/年的2核4G企业专享型备受青睐。4核16G游戏服务器70元/月,8核32G则160元/月。GPU服务器也有大幅折扣,如T4显卡的gn6i最低配置4核15G一个月1878.40元。续费享有长期折扣,1年7.5折,3年4.5折等。公网带宽和系统盘按需计费,ESSD云盘性能优越,价格透明。详情见官网。
|
8月前
|
前端开发 JavaScript
有没有方法可以保证在JavaScript中多个异步操作的执行顺序?
有没有方法可以保证在JavaScript中多个异步操作的执行顺序?
301 58
|
XML JavaScript 前端开发
vue项目中使用bpmn.js详细流程(结合activiti版)
vue项目中使用bpmn.js详细流程(结合activiti版)
2372 0
|
11月前
|
JavaScript 前端开发 图形学
JavaScript 中 Math 对象常用方法
【10月更文挑战第29天】JavaScript中的Math对象提供了丰富多样的数学方法,涵盖了基本数学运算、幂运算、开方、随机数生成、极值获取以及三角函数等多个方面,为各种数学相关的计算和处理提供了强大的支持,是JavaScript编程中不可或缺的一部分。
|
12月前
|
存储 前端开发 JavaScript
深入理解React组件的生命周期与Hooks
【10月更文挑战第7天】深入理解React组件的生命周期与Hooks
498 0
|
Rust API 开发者
【一起学Rust | 框架篇 | ws-rs框架】属于Rust的Websocket框架——ws-rs
【一起学Rust | 框架篇 | ws-rs框架】属于Rust的Websocket框架——ws-rs
1469 0