您好！大神！！！
我想通过canvas生成缩略图，但是老是只生了图片的一部份 （客户端 IPHONE7有此问题 开发者工具不会出现这个问题）
WXML
<canvas canvas-id="shareCanvas" style=" top:-{{cavHeight}}px;left:-{{cavWidth}}px; width:{{cavWidth}}px;height:{{cavHeight}}px;background:#ccc;"></canvas>
JS
1．设置默认大小
data: {
PicUrl: "",
cavWidth:100,
cavHeight:100,
pixelRatio: device.pixelRatio
},
２．选择图片后自动调整画布大小
wx.getImageInfo({
src: PicUrl,
success: function(res) {
console.log(res);
const ctx = wx.createCanvasContext('shareCanvas')
console.log("画布信息");
console.log(ctx);
var cavWidth = res.width;// / device.pixelRatio;
var cavHeight = res.height;// / device.pixelRatio;
console.log("画布宽度："+ctx.width+"px 高度："+ctx.height);
console.log("图片宽度：" + res.width + "px 高度：" + res.height);
console.log(ctx);
page.setData({
cavWidth: cavWidth,
cavHeight: cavHeight
})
最终客户端只显示 了图片的一部份
就是canvas的默认值
cavWidth:100,
cavHeight:100,
而代码
page.setData({
cavWidth: cavWidth,
cavHeight: cavHeight
})
并没有生效 抓狂了，谢谢大神们指引一下
在给canvas设置宽高的setData的回调方法里画图。。如果还需要直接存图，还要setTimeout一下
我的确是在回调时画图的，可是还是不行，后来我在回调方法内 再加一个setTimeOUT 问题就解决了，不过只设置了一秒，具体要设置几秒呢？
如果只设置一秒，会不会因为图片太大而无法正常保存呢?
这算不算小程序的一个bug啊？
page.setData({
cavWidth: cavWidth,
cavHeight: cavHeight
},()=>{
ctx.drawImage...
ctx.draw(false,()=>{
setTimeout(()=>{
wx.canvasToTempFilePath...
},200)
})
})
大神，你只设置了200毫秒，确定这样不会因为图片太大而产生问题？
不会 这里这是用的回调的方式 draw会保证画好了之后才进入回调
好的，谢谢你
其实标签上的style已经改成功了但是webglCanvas的绘制上下文中drawingBuffWidth/Height并没有动态改变，导致webglCanvas绘制区域并没有改变，而且这个属性是只读属性，目前看来webglCanvas是改不了大小的，微信应该出一个在改变canvas样式后更新绘制上下文的功能。
<canvas
canvas-id="shareCanvas"
width="{{cavWidth}}"
height="{{cavHeight}}"
style=" top:-{{cavHeight}}px;left:-{{cavWidth}}px; width:{{cavWidth}}px;height:{{cavHeight}}px;background:#ccc;">
</canvas>
谢谢，但此方法无效
可能因为创建canvasContext了，所以不能动态改变了，之前应该是可以的，你在setData设置了canvas长宽之后回调里wx.createCanvasContext('shareCanvas')试试可以不
麻烦做个代码片段（https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html）。
如果不行可以看下这个文章：https://www.jianshu.com/p/fdfd8ca4bfec
wxml 源码
<!--pages/test/make_pic.wxml-->
<view>
Canvas宽度：{{cavWidth}} Canvas 高度：{{cavHeight}}
</view>
<view bindtap="ClickUploadPhoto" style='width:395rpx;height:100rpx;background:#ff6600;color:#fff;text-align:center;'>
<!-- <image wx:if="{{PicUrl!=''}}" src='{{PicUrl}}' mode='widthFix'></image> -->
上传
</view>
<image wx:if="{{TmpPic!=''}}" src='{{TmpPic}}' mode='widthFix' style='background:#ccc;border:#ff6600;'></image>
<canvas bindtap="ClickUploadPhoto" canvas-id="shareCanvas" style=" top:0px;left:0px; width:{{cavWidth}}px;height:{{cavHeight}}px;background:#ccc;"></canvas>
js源码
// pages/test/make_pic.js
const device = wx.getSystemInfoSync();
Page({
/**
* 页面的初始数据
*/
data: {
PicUrl: "",
cavWidth: 100,
cavHeight: 100,
pixelRatio: device.pixelRatio
},
//上传图片
ClickUploadPhoto: function(e) {
var page = this;
var index = e.currentTarget.dataset.index;
var pictype = e.currentTarget.dataset.pictype;
wx.chooseImage({
// 设置最多可以选择的图片张数，默认9,如果我们设置了多张,那么接收时//就不在是单个变量了,
count: 1,
sizeType: ['original', 'compressed'], // original 原图，compressed 压缩图，默认二者都有
sourceType: ['album'], // album 从相册选图，camera 使用相机，默认二者都有
success: function(res) {
// 获取成功,将获取到的地址赋值给临时变量
var tempFilePaths = res.tempFilePaths;
var PicUrl = tempFilePaths[0];
page.setData({
PicUrl: PicUrl
})
wx.getImageInfo({
src: PicUrl,
success: function(res) {
console.log(res);
const ctx = wx.createCanvasContext('shareCanvas')
console.log("画布信息");
console.log(ctx);
var cavWidth = res.width; // device.pixelRatio;
var cavHeight = res.height; // device.pixelRatio;
console.log("画布宽度：" + cavWidth + "px 高度：" + cavHeight);
console.log("图片宽度：" + res.width + "px 高度：" + res.height);
console.log("缩放倍率" + device.pixelRatio);
console.log(ctx);
page.setData({
cavWidth: cavWidth,
cavHeight: cavHeight
})
ctx.drawImage(PicUrl, 0, 0, cavWidth, cavHeight)
// // 作者名称
// ctx.setTextAlign('left') // 文字居中
// ctx.setFillStyle('#ffff00') // 文字颜色：黑色
// ctx.setFontSize(22) // 文字字号：22px
// ctx.fillText("this is pic txt", 50, 50)
//ctx.stroke()
ctx.draw(true, function(resObj) {
console.log("绘画结果");
console.log(resObj);
wx.canvasToTempFilePath({
x: 0,
y: 0,
//quality:1,
fileType: "jpg",
canvasId: 'shareCanvas',
success: function(d_res) {
wx.showToast({
title: '成功把文件加入到临时文件夹',
duration: 3000
})
console.log("成功写入到临时文件");
console.log(d_res);
var TmpPic = d_res.tempFilePath;
console.log("临时图片");
console.log(TmpPic);
wx.saveImageToPhotosAlbum({
filePath: TmpPic,
})
page.setData({
TmpPic: TmpPic
})
}
}, this)
})
}
})
},
fail: function(res) {
console.log(res);
},
complete: function(res) {
console.log(res);
}
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
wx.getSetting({
success(res) {
console.log(res);
console.log("是否打开相册写入权限：" + res.authSetting['scope.writePhotosAlbum']);
if (!res.authSetting['scope.writePhotosAlbum']) {
wx.authorize({
scope: 'scope.writePhotosAlbum',
success() {
}
})
} else {
wx.showToast({
title: '打开了相册写入权限：',
duration: 3000,
icon: 'none'
})
}
}
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function() {
}
})