- 如何从手机中选择文件并绘制在convas上?
由于<image>不能对图像进行逐像素的处理,所以需要用到convas,但是convas绘图一直不成功,请问有什么解决的办法? [代码]selectImage: [代码][代码]function[代码][代码](index) {[代码][代码] [代码][代码]var[代码] [代码]that = [代码][代码]this[代码][代码];[代码][代码] [代码][代码]var[代码] [代码]c = wx.createCanvasContext([代码][代码]'firstCanvas'[代码][代码]);[代码][代码] [代码][代码]var[代码] [代码]img_path = [代码][代码]new[代码] [代码]String();[代码][代码] [代码][代码]wx.chooseImage({[代码][代码] [代码][代码]count: 1,[代码][代码] [代码][代码]sizeType: [[代码][代码]'original'[代码][代码], [代码][代码]'compressed'[代码][代码]], [代码][代码]// 可以指定是原图还是压缩图,默认二者都有 [代码][代码] [代码][代码]sourceType: [[代码][代码]'album'[代码][代码], [代码][代码]'camera'[代码][代码]], [代码][代码]// 可以指定来源是相册还是相机,默认二者都有 [代码][代码] [代码][代码]success: [代码][代码]function[代码][代码](res0) {[代码][代码] [代码][代码]// 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片[代码][代码] [代码][代码]img_path = res0.tempFilePaths[0];[代码][代码] [代码][代码]console.log([代码][代码]'get path'[代码][代码]);[代码][代码] [代码][代码]that.setData({[代码][代码] [代码][代码]img_path: res0.tempFilePaths[代码][代码] [代码][代码]});[代码][代码] [代码] [代码] [代码][代码]wx.getImageInfo({[代码][代码] [代码][代码]src: img_path,[代码][代码] [代码][代码]success: [代码][代码]function[代码][代码](res1) {[代码][代码] [代码][代码]screen.w = res1.width;[代码][代码] [代码][代码]screen.h = res1.height;[代码][代码] [代码][代码]c.drawImage(res1.path, 0, 0, screen.w, screen.h);[代码][代码] [代码][代码]wx.canvasGetImageData({[代码][代码] [代码][代码]canvasId: [代码][代码]"firstCanvas"[代码][代码], [代码][代码]//参数,canvas标签的id[代码][代码] [代码][代码]x: 0, [代码][代码]//起始位置,x坐标[代码][代码] [代码][代码]y: 0,[代码][代码] [代码][代码]width: 100,[代码][代码] [代码][代码]height: 100,[代码][代码] [代码][代码]success: [代码][代码]function[代码][代码](res2)[代码] [代码] [代码][代码]{[代码][代码] [代码][代码]//引入upng,将图片转化成utf-8格式[代码][代码] [代码][代码]let pngData = upng.encoded([res.data.buffer].res.width, res.height)[代码][代码] [代码][代码]//再转化成base64[代码][代码] [代码][代码]let bs64 = wx.arrayBufferToBase64(pngData)[代码][代码] [代码][代码]console.log([代码][代码]'1'[代码][代码])[代码][代码] [代码][代码]},[代码][代码] [代码][代码]fail: [代码][代码]function[代码][代码](error) {[代码][代码] [代码][代码]console.log(error) // 报错:errMsg: "canvasGetImageData: fail canvas is empty"[代码][代码] [代码][代码]},[代码][代码] [代码][代码]complete: [代码][代码]function[代码][代码](res) {[代码][代码] [代码][代码]console.log([代码][代码]'over'[代码][代码])[代码][代码] [代码][代码]},[代码][代码] [代码][代码]});[代码][代码] [代码][代码]}[代码][代码] [代码][代码]});[代码] [代码] [代码][代码]}[代码][代码] [代码][代码]})[代码]
2019-11-18 - var img = new Image() 为什么报错?
问题一:[代码]var[代码] [代码]img = [代码][代码]new[代码] [代码]Image();[代码] [代码]报错:Image is not defined; [Component] Event Handler Error @ pages/index/index[代码][代码]#bound selectImage[代码][代码]ReferenceError: Image is not defined[代码] 问题二: 在wxss中定义了一个标签 [代码]<image src=[代码][代码]"{{imgPath}}"[代码][代码]></image>[代码]有什么办法可以把整个image标签作为对象在js中进行操作吗?比如: [代码]var[代码] [代码]img = 把wxss中的image标签转换为对象;[代码][代码]img.src = [代码][代码]"img.png"[代码][代码];[代码][代码]img.xxx = ...;[代码]
2019-11-11