报错:draw.js const _drawImage = (img) => { if (this.use2dCanvas) { console.log('canvas:', canvas); const Image = canvas.createImage() // 这行报错 Image.onload = () => { ctx.drawImage(Image, x, y, w, h) ctx.restore() resolve() } Image.onerror = () => { reject(new...
Step3. wxml 引入组件 <videoclass="video"src="{{src}}"><wxml-to-canvasclass="widget"></wxml-to-canvas></video><imagesrc="{{src}}"style="width: {{width}}px; height: {{height}}px"></image> Step4. js 获取实例 const{wxml,style}=require('./demo.js')Page({data:{src:''},onL...
6、配置wxml页面 /pages/domData.js const wxml = (name, pic, c1) => `<viewclass="container"><imagesrc="` + pic + `"class="pic"/><textclass="name">${name}</text><textclass="content">` + c1[0] + `</text><textclass="content">` + c1[1] + `</text><textclass="content"...
官方demo用的是网络图片，本地的我用了两种都不行
</view>`this.renderToCanvas({wxml,style}).then(res=>{resolve(res)})})},//渲染成海报renderToCanvas({wxml,style}){returnnewPromise((resolve,reject)=>{constp1=this.widget.renderToCanvas({wxml,style})p1.then((res)=>{this.container=resreturnthis.extraImage(this)}).then((res)=>{resolve...
<image class="img" src='`+share_img+`'></image> </view> <view class="item-box2" > <text class="text">`+name+`</text> </view> <view class="item-box3"> <image class="img2" src='`+qrcode_img+`'></image> </view> ...
{ wxml, style }) p1.then((res) => { this.container = res this.extraImage() }) }, extraImage() { const p2 = this.widget.canvasToTempFilePath() p2.then(res => { this.setData({ src: res.tempFilePath, width: this.container.layoutBox.width, height: this.container.layoutBox....
npm install wxml-to-canvas (下载完后重新构建npm) 新建组件-share.js 因为我们涉及到动态参数,所以使用了传参 constwxml=(img,name,organiseid,codeImg)=>{return`<viewclass="container"><viewclass="box1"><imageclass="img"src='`+img+`'></image></view><viewclass="namebox"><textclass="nametex...
}Image.onerror=() =>{reject() }Image.src= img }) } 回到顶部 三、wxml-to-canvas的动态加载数据 由于用wxml-to-canvas绘制图片的时候是通过这个函数renderToCanvas({wxml,style})将wxml模板和wxss样式绘制到canvas上的,而我们可以通过将wxml和style包装成一个函数,通过参数完成动态显示数据。
支持view、text、image三种标签,通过 class 匹配 style 对象中的样式。 <viewclass="container"> <viewclass="item-box red"> </view> <viewclass="item-box green"> <textclass="text">yeah!</text> </view> <viewclass="item-box blue"> <imageclass="img"src="https://ss0.bdstatic.com/70cFvHS...