canvas 绘画不对 打印的信息都对 但是绘制出来的比例不对 有拉伸
发布于 5 年前 作者 bcui 16364 次浏览 来自 问答

data: {

canvas_width0:1000,

canvas_height0:1000,

canvas_width1: 1000,

canvas_height1: 1000,

canvas_width2: 1000,

canvas_height2: 1000,

canvas_width3: 1000,

canvas_height3: 1000,

photoTaken:false,

photoSrc:[]

},

getPhoto(url) {

var that = this;

var strImg = [];

function __url2base64(url,index) {

return new Promise((resolve, reject) => {

wx.getImageInfo({

src: url,

success: function (res) {

var width = res.width;

var height = res.height ;

var canvas_height = null;

var canvas_width = null;

if (width > height) {

canvas_width = 1000;

canvas_height = Math.floor(height / width * canvas_width);

} else {

canvas_height = 1000;

canvas_width = Math.floor(width / height * canvas_height);

}

var fc = ‘firstCanvas’ + index;

let canvas_size = {}

canvas_size[‘canvas_width’ + index] = canvas_width;

canvas_size[‘canvas_height’ + index] = canvas_height;

that.setData({

…canvas_size

})

setTimeout(()=>{

var ctx = wx.createCanvasContext(fc);

ctx.clearRect(0, 0, that.data[‘canvas_width’ + index], that.data[‘canvas_height’ + index]);

ctx.drawImage(url, 0, 0, that.data[‘canvas_width’ + index], that.data[‘canvas_height’ + index]);

ctx.draw(true, function () {

wx.canvasToTempFilePath({

x: 0,

y: 0,

width: that.data[‘canvas_width’ + index],

height: that.data[‘canvas_height’ + index],

destWidth: that.data[‘canvas_width’ + index],

destHeight: that.data[‘canvas_height’ + index],

canvasId: ‘firstCanvas’ + index,

success: function (res) {

resolve(res.tempFilePath)

}

})

})

}, 300)

},

fail: function (res) { },

complete: function (res) { },

})

})

}

return Promise.all(that.photoSrc.map((m,index) => __url2base64(m,index)))

},

chooseImgHandler(){

var that = this;

wx.chooseImage({

count: 4, // 默认9

sizeType: [‘original’], // 可以指定是原图还是压缩图,默认二者都有

sourceType: [‘album’], // 可以指定来源是相册还是相机,默认二者都有

success: function (res) {

// 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片

var tempFilePaths = res.tempFilePaths

that.photoSrc = tempFilePaths;

that.uploadImage();

},

complete: function () {

}

})

},

uploadImage: function () {

if(this.updateLoading === true){

return false;

}

this.updateLoading = true;

wx.showLoading({

title: ‘上传中’,

})

var that = this;

that.getPhoto(that.photoSrc).then(

(canvas_url_array) => {

var _urlStr = [];

for (var k = 0; k < canvas_url_array.length; k++) {

wx.uploadFile({

url: ‘你的提交地址’, //仅为示例,非真实的接口地址

filePath: canvas_url_array[k],

name: ‘file’,

formData: {

‘user’: ‘test’

},

success: function (res) {

var _data = JSON.parse(res.data);

_urlStr.push(_data.url);

if (_data.state == “SUCCESS”) {

if (_urlStr.length == canvas_url_array.length){

var _url = _urlStr.join(’,’)

that.updateLoading = false;

wx.navigateTo({

url: ‘/pages/scaning/scaning?sessionId=’ + sessionId + ‘&img_url=’ + _url

})

wx.hideLoading()

}

}

},

complete: function () {

that.updateLoading = false;

}

})

}

}

);

}

scaning 页面为webview 打印信息宽高都没问题 出来的图就是有拉伸

回到顶部