小程序canvas画图保存至手机相册

(1)可直接展示生成的海报 。因手机分辨率不同可能导致生成的海报会有细微差别,这里隐藏canvas海报,页面正常设置海报样式保存时保存隐藏的canvas海报

(2)tip: canvas 组件是由客户端创建的原生组件,它的层级是最高的,不能通过 z-index 控制层级。(在手机上canvas在最上层无法隐藏)解决方法:

  canvas外加一框view 设置样式:style="width:0;height:0;overflow: hidden;opacity:0;position:absolute;left:-375px;top:0; 隐藏在屏幕之外

<view class="container">
<view class="btn" bindtap="saveImage">保存图片</view>
<view class="canvasBox">
<!-- <view class="canvasBox" style="width:0;height:0;overflow: hidden;opacity:0;position:absolute;left:-375px;top:0;"> -->
   <!--这里为了展示效果为设置到屏幕之外 -->
<canvas canvas-id='myCanvas' style='width:375px;height:500px;margin: 0;padding: 0;display:block;'></canvas>
</view>
</view>

(3)绘制圆形用户头像 

      ctx.arc(46,358,25, 0, 2 * Math.PI)
      ctx.fill()
      ctx.save();
      ctx.beginPath(); //开始绘制
      ctx.clip(); //剪切
      ctx.drawImage(res.path, 23, 333, 50, 50); //userHeader // 推进去图片必须是https
      ctx.restore(); //恢复之前保存的绘图上下文 继续绘制
(4)小程序canvas真机绘图时无法使用网络图片,需下载至手机使用临时路径绘制,这里使用wx.getImageInfo获取网络图片临时路径
(5)这里图片均使用网络图片
//index.js
const app = getApp()
Page({
data: {
cardPath: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534766809331&di=012cc4ad15d457ffa55c6537503eb84a&imgtype=0&src=http%3A%2F%2Fpicture.5068.com%2Fallimg%2F121120%2F4-1211201G920.jpg',
headPath: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534765039080&di=1e81a596bc89cd54db55c0dbc7c4bb87&imgtype=0&src=http%3A%2F%2Fimg3.100bt.com%2Fupload%2Fttq%2F20140529%2F1401337844678_middle.png',
sendName: '文字描述描述文字'
},
onLoad: function (options) {
var that = this;
wx: wx.getSystemInfo({
success: function (res) {
that.setData({
pixelRatio: res.pixelRatio,
windowWidth: res.windowWidth,
windowHeight: res.windowHeight
})
}
})
that.drawCanvas();
},
//画图
drawCanvas: function () {
this.setData({
cardPath: this.data.cardPath,
headPath: this.data.headPath,
sendName: this.data.sendName
});
let ctx = wx.createCanvasContext('myCanvas');
let ctxW = this.data.windowWidth;
let ctxH = 1210;
// 默认像素比
let pixelRatio = this.data.pixelRatio; // 垂直渐变
const grd = ctx.createLinearGradient(0, 0, 0, ctxH);
grd.addColorStop(0, '#ffffff');
grd.addColorStop(1, '#ffffff');
ctx.setFillStyle(grd);
ctx.fillRect(0, 0, ctxW, ctxH); wx.getImageInfo({
src: this.data.cardPath,
success: (res) => {
ctx.drawImage(res.path, 15, 15, 345, 470); //card
wx.getImageInfo({
src: this.data.headPath,
success: (res) => {
/**/
ctx.arc(46,358,25, 0, 2 * Math.PI)
ctx.fill()
ctx.save();
ctx.beginPath(); //开始绘制
ctx.clip(); //剪切
ctx.drawImage(res.path, 23, 333, 50, 50); //userHeader // 推进去图片必须是https
ctx.restore(); //恢复之前保存的绘图上下文 继续绘制
/**/ ctx.setTextAlign('left');
ctx.setTextBaseline('middle');
ctx.setFontSize(16);
ctx.setFillStyle('#fff');
this.fontLineFeed(ctx, this.data.sendName, 450, 30, 79, 328);
ctx.stroke();
ctx.draw();
}
}) }
})
},
// 保存图片
saveImage: function (e) {
wx.canvasToTempFilePath({
canvasId: 'myCanvas',
success: function (res) {
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success(result) {
wx.showToast({
title: '图片保存成功',
icon: 'success',
duration: 2000
})
}
})
}
})
},
// 文字换行
fontLineFeed: function (ctx, str, splitLen, strHeight, x, y) {
let strArr = [];
for (let i = 0, len = str.length / splitLen; i < len; i++) {
strArr.push(str.substring(i * splitLen, i * splitLen + splitLen));
}
let s = 0;
for (let j = 0, len = strArr.length; j < len; j++) {
s = s + strHeight;
ctx.fillText(strArr[j], x, y + s);
}
},
})

 (6)页面显示样式

(7)保存图片为

(8)tips:保存至手机时需配置网络图片域名至小程序开发者downloadFile 合法域名下。

   tips:微信用户头像域名也必须配置 (大坑.........)

 

 

小程序canvas生成海报保存至手机相册的更多相关文章

  1. 小程序base64图片格式保存至手机相册

    // 保存图片至相册 saveImg() { //获取文件管理器对象 const fs = wx.getFileSystemManager() //文件保存路径 const Imgpath = wx. ...

  2. 微信小程序canvas生成并保存图片

    ---恢复内容开始--- 微信小程序canvas生成并保存图片,具体实现效果如下图     实现效果需要做以下几步工作 一.先获取用户屏幕大小,然后才能根据屏幕大小来定义canvas的大小 二.获取图 ...

  3. 小程序(Wepy)--生成海报图片

    对于小程序的分享, 除了分享给朋友, 好友群,是可以直接做到的, 但是要想扩大推广范围, 通过生成海报图片, 将自己小程序码带进去,应该是目前我所知的好办法了. 但是海报也不是那么好搞.之前自己手写出 ...

  4. 小程序canvas生成二维码图片踩的坑

    1:生成临时图片,保证画布被加载以及渲染(即本身不可以 hidden 或是 上级元素不可以 hidden 或是 wx:if 隐藏等) == > 建议:因为 canvas 的组件层级(z-inde ...

  5. 微信小程序 canvas 生成随机验证码

    转载:https://blog.csdn.net/qq_16646819/article/details/81020245?utm_source=blogxgwz0 js // pages/bind/ ...

  6. 微信小程序利用canvas生成海报分享图片

    一 . 效果 这是借用女神照生成的分享的海报,图片来自网络. 新增了poster组件和更新图片自适应 二 . 准备 准备两张图片连接,最好是自己开发账号验证的https图片链接. 三 . 实现思路 其 ...

  7. 微信小程序cavas画图并保存

    需求背景: 因微信小程序暂不支持一键分享到朋友圈功能,故要生成图片并保存到手机相册就有两种情况: 1.需保存的图片为静态固定图片.这种情况图片可直接由后端返回,再调用小程序相应api直接保存到手机相册 ...

  8. 微信小程序 canvas 绘图问题总结

    业务中碰到微信小程序需要生成海报进行朋友圈分享,这个是非常常见的功能,没想到实际操作的时候花了整整一天一夜才搞好,微信的 canvas 绘图实在是太难用了,官方快点优化一下吧. 业务非常简单,只需要将 ...

  9. [技术博客]海报图片生成——小程序canvas画布

    目录 背景介绍 canvas简介 代码实现 难点讲解 圆角矩形裁剪失败之PS的妙用 编码不要过硬 对过长的文字进行截取 真机首次生成时字体不对 drawImage只能使用本地图片 背景介绍 目标:利用 ...

随机推荐

  1. “Java是编译执行的语言”这句话对吗?

    现在让你谈谈对Java平台的理解,你是否会感觉内容过于庞大?这个问题是比较宽泛的,Java发展到现在已经不仅仅是语言这么简单了,Java平台涉及的,包括但不仅限于下面提到的这些内容: Java语言本身 ...

  2. xxl-job安装教程

    xxl-job是一个开源的分布式调度框架,其他类似的框架还有airflow,oozie等等,需要进行对比 https://github.com/xuxueli/xxl-job 1.首先git clon ...

  3. 【Dubbo 源码解析】05_Dubbo 服务发现&引用

    Dubbo 服务发现&引用 Dubbo 引用的服务消费者最终会构造成一个 Spring 的 Bean,具体是通过 ReferenceBean 来实现的.它是一个 FactoryBean,所有的 ...

  4. 使用PgBouncer连接池

    1.pgbouncer 的介绍 pgbouncer是一个针对PostgreSQL数据库的轻量级连接池,任何目标应用都可以把 pgbouncer 当作一个 PostgreSQL/Greenplum 服务 ...

  5. Window通过Web方式修改域用户密码

    如何通过web方式修改域用户密码: 1.在Windows Server 2003上,系统默认提供了iisadmpwd作为一种修改域用户密码的方式 2.在Windows Server 2008上,可以提 ...

  6. browser-sync events.js:85 throw er; // Unhandled 'error' event

    browser-sync运行的时候提示如下错误,这个是因为browser-sync 配置的端口被占用的原因. events.js:85 throw er; // Unhandled 'error' e ...

  7. monit检测语法

    1.存在性检测 功能:检测文件或者服务不存在时进行相应的动作,默认是重启 语法: IF [DOES] NOT EXIST [[<X>] <Y> CYCLES]    THEN ...

  8. sublime 安装ctags跳转以及跳转快捷键

    在source insight中有一个很好用的功能,就是函数的跟踪跳转,在阅读别人的代码的时候轻松的浏览原函数.我们知道,在使用vim的时候有个插件叫ctags,同理,在sublime text中也能 ...

  9. C#简单三层结构设计UI、BLL、DAL、Model实际项目应用例子

    C#简单三层结构设计UI.BLL.DAL .Model实际项目应用例子 在实际项目中,程序设计都有他的层次结构,比如MVC.MVP.普通的三层结构等等,不过现在用三层结构的相比可能少了,但是也有一些小 ...

  10. Python Pandas 时间序列双轴折线图

    时间序列pv-gmv双轴折线图 import numpy as np import pandas as pd import matplotlib.pyplot as plt n = 12 date_s ...