canvas是微信小程序中最常用的组件之一，可以实现图片裁剪、压缩等多种功能。但是实现这些功能的前提之一是用canvas绘制图片，但是由于微信官方的辣鸡文档，总是要有坑需要踩，其中最常见的就是使用drawImage这个API绘制图片时经常出现的图片缩放问题。
首先给定一个canvas宽度
（假定为窗口宽度）
，然后根据所要绘制的图片计算出图片的高宽比，再使用窗口高度（除去导航栏，状态栏剩下的部分）乘以图片高宽比得到画布高度，计算公式如下：
canvas\_width=window\_width \\ canvas\_height=window\_height * \frac{image\_height}{image\_width}
c
a
n
v
a
s
_
w
i
d
t
h
=
w
i
n
d
o
w
_
w
i
d
t
h
c
a
n
v
a
s
_
h
e
i
g
h
t
=
w
i
n
d
o
w
_
h
e
i
g
h
t
∗
i
m
a
g
e
_
w
i
d
t
h
i
m
a
g
e
_
h
e
i
g
h
t
<canvas id="cut_image_canvas"
style="width:{{cut_img_canvas_w}}px;height:{{cut_img_canvas_h}}px;"
type="2d" >
</canvas>
page({
data: {
window_width: 0,
window_heigt: 0,
cut_img_canvas_w: 0,
cut_img_canvas_h: 0,
image_obj:{}
onReay:function(){
const that = this
wx.getSystemInfo({
success: function(res) {
that.data.window_heigt = res.windowHeight
that.data.window_width = res.windowWidth
* 创建图片裁剪画布
create_cut_image_canvas: function(image_url) {
const that = this
const query = wx.createSelectorQuery()
query.select('#cut_image_canvas')
.fields({
node: true,
size: true
.exec((res) => {
console.log("res", res)
const canvas = res[0].node
that.data.cut_image_canvas = canvas.getContext('2d')
let w = 0
let h = 0
wx.getImageInfo({
src: image_url,
success: function(res) {
canvas.width = that.data.window_width;
w = that.data.window_width
canvas.height = that.data.window_width / res.width * res.height
h = canvas.height
that.setData({
cut_img_canvas_h: h,
cut_img_canvas_w: w
that.data.image_obj = canvas.createImage();
that.data.image_obj.src = image_url
that.data.image_obj.onload = () => {
that.data.cut_image_canvas.drawImage(that.data.image_obj, 0, 0, w, h)
图片url不能使用网络图片，如果要使用网络图片，需要先下载到本地然后使用微信小程序生成的临时文件url。
前言canvas是微信小程序中最常用的组件之一，可以实现图片裁剪、压缩等多种功能。但是实现这些功能的前提之一是用canvas绘制图片，但是由于微信官方的辣鸡文档，总是要有坑需要踩，其中最常见的就是使用drawImage这个API绘制图片时经常出现的图片缩放问题。解决思路首先给定一个canvas宽度 （假定为窗口宽度），然后根据所要绘制的图片计算出图片的高宽比，再使用窗口高度（除去导航栏，状态...
闲暇时间抽个空写了个三国杀武将手册的小程序，中间有个需求设计的是合成武将皮肤图、竖排的武将姓名、以及小程序码，然后提供保存图片到相册，最终让用户可以分享到朋友圈或其他平台。合成图片应该按照 Canvas 的文档来做都没什么问题，主要是有个竖排文字的需求，这里和大家分享一下。
首先放一张最终保存到相册的图片吧~
自我感觉良好，至少达到了我自己的预期吧~~~
下面让我们一步一步来看看如何实现的吧。
整个图片分为三个部分：
武将图片
小程序码
武将文字信息
先来看一下 wxml 里面的代码，主要是放了一个 canvas 标签，控制了一下高度和宽度属性。
昨天夜里看着微信的推送通知，小程序新功能，个人可以申请小程序，公众号自定义菜单可以打开小程序……又是开心又是难过，开心小程序的不断发展，难过小程序的不够完善，个人自开发以来，处处踩坑，canvas也是大家用到的比较少的东西，所以耗了不少时间。
切入主题。在html里如果要画一张图，要用img.onload监听图片加载完成以后才能操作，另外画图的过程中还存在着图片跨域的问题。查了一下文档
更改html5 canvas元素的尺寸，从画布上的相对位置调整大小（默认为中心），并保留图像数据
类似如何更改在Photoshop图像的分辨率，但随着精细的控制from位置。 用绝对的新尺寸或相对变化进行调整。 这个新版本调整了画布的大小，而不是返回具有不同大小的新画布。 要获得新的画布，请提供原始画布的副本。
如果尚未下载node，请从下载并安装。
npm install resize-canvas --save
import resizeCanvas from 'resize-canvas'
let canvas = document . createElement ( 'canvas' )
// set height and width
canvas . width = 300
canvas . height = 200
// add to dom
对于大尺寸图片的上传，在前端进行压缩除了省流量外，最大的意义是极大的提高了用户体验。
这种体验包括两方面：
1、由于上传图片尺寸比较小，因此上传速度会比较快，交互会更加流畅，同时大大降低了网络异常导致上传失败风险。
2、最重要的体验改进点：省略了图片的再加工成本。很多网站的图片上传功能都会对图片的大小进行限制，尤其是头像上传，限制5M或者2M以内是非常常见的。然后现在的数码设备拍摄功能都非常出众，...
var mengvalue = -1;
var phoneWidth = parseInt(window.screen.width);
var phoneScale = phoneWidth / 640;
var ua = navigator.userAgent;
if (/Android (\d+\.\d+)
比较闲的日子里实验了一番，主要有以下几种方法，
1. css background-image + animation
2. cssbackground-position + animation
3. jsbackground-image
4.jsb...
onReady: function () {
// 获取canvas对象
var context = wx.createCanvasContext('myCanvas')
// 绘制一条线
context.beginPath()
context.moveTo(50, 50)
context.lineTo(250, 50)
context.setStrokeStyle('red')
context.stroke()
context.closePath()
// 绘制完成后需要调用draw方法将绘制结果显示在canvas上
context.draw()
这段代码会在canvas中绘制一条红色的直线，起点坐标为(50, 50)，终点坐标为(250, 50)。
