wxml2Canvas绘制小程序图片
【代码】wxml2Canvas绘制小程序图片。
·
Wxml:
<view class="share">
<view class="share__title">Wxml:</view>
<view class="share__canvas share__canvas1 ">
<view class="share__canvas1-text draw_canvas" data-type="text" data-text="这是一段无边距文字">这是一段无边距文字</view>
<view class="share__canvas1-text-2 draw_canvas" data-type="text" data-text="这是一段margin文字">这是一段margin文字</view>
<view class="share__canvas1-text-3 draw_canvas" data-type="text" data-text="这是一段padding文字">这是一段padding文字</view>
<view class="share__canvas1-text-4 draw_canvas" data-type="text" data-text="这是一段居中有背景文字">这是一段居中有背景文字</view>
<view class="share__canvas1-text-5 draw_canvas" data-type="text" data-text="这是一段背景文字" data-background="rgba(255, 0, 0, 0.4)" data-padding="0 0 0 0">这是一段背景文字</view>
</view>
<view class="share__title">Canvas:</view>
<canvas canvas-id="canvas1" class="share__canvas"></canvas>
<view class="share__title">Wxml:</view>
<view class="share__canvas share__canvas2">
<image class="share__canvas2-image draw_canvas" data-type="image" data-url="https://mmocgame.qpic.cn/wechatgame/duc2TvpEgSQCEa0WicosqlEgJiacYLaTLEDFB8Kq9Hr7LjAVhM8wu8TT77KqNezQnH/0" src="https://mmocgame.qpic.cn/wechatgame/duc2TvpEgSQCEa0WicosqlEgJiacYLaTLEDFB8Kq9Hr7LjAVhM8wu8TT77KqNezQnH/0"></image>
<image class="share__canvas2-image-2 draw_canvas" data-type="radius-image" data-url="./img/demo.png" src="./img/demo.png"></image>
<view class="share__canvas2-image-3 draw_canvas" style="background-image: url(https://mmocgame.qpic.cn/wechatgame/duc2TvpEgSQCEa0WicosqlEgJiacYLaTLEDFB8Kq9Hr7LjAVhM8wu8TT77KqNezQnH/0);" data-type="background-image"></view>
<view class="share__canvas2-image-4 draw_canvas" data-type="background-image" data-base64="1"></view>
<image class="share__canvas2-image-3 draw_canvas" data-type="image" data-base64="1" mode="widthFix"
data-url="data:image/png;base64,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"
src="data:image/png;base64,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"></image>
</view>
<view class="share__title">Canvas: </view>
<canvas canvas-id="canvas2" class="share__canvas"></canvas>
<view class="share__title">Wxml:</view>
<view class="share__canvas share__canvas3">
<view class="share__canvas3-inline draw_canvas" data-type="inline-text" data-text="这是一段行内文字">这是一段行内文字</view>
<view class="share__canvas3-inline share__canvas3-inline_bold draw_canvas" data-type="inline-text" data-text="这是一段加粗行内文字试试">这是一段加粗行内文字试试</view>
<view class="share__canvas3-inline draw_canvas" style="color: red" data-type="inline-text" data-text="这是一段换行文字">这是一段换行文字</view>
<view class="share__canvas3-inline draw_canvas" data-type="inline-text" data-text="这是一段很长很长很长很长很长很长很长很长很长很长很长很长的换行文字">这是一段很长很长很长很长很长很长很长很长很长很长很长很长的换行文字</view>
<view class="share__canvas3-inline draw_canvas" data-type="inline-text" data-text="这是一段换行文字">这是一段换行文字</view>
<view class="share__canvas3-inline draw_canvas" style="color: blue" data-type="inline-text" data-text="这是一段换了行的结束文字">这是一段换了行的结束文字</view>
<image src="./img/emoji.png" class="share__canvas-emoji draw_canvas" data-type="inline-image" data-url="./img/emoji.png"></image>
<image src="./img/emoji.png" class="share__canvas-emoji draw_canvas" data-type="inline-image" data-url="./img/emoji.png"></image>
<image src="./img/emoji.png" class="share__canvas-emoji draw_canvas" data-type="inline-image" data-url="./img/emoji.png"></image>
<view class="share__canvas3-inline draw_canvas" data-type="inline-text" data-text="这是一段行内文字这是一段行内文字">这是一段行内文字这是一段行内文字</view>
</view>
<view class="share__title">Canvas: </view>
<canvas canvas-id="canvas3" class="share__canvas"></canvas>
<view class="share__title">Wxml:</view>
<view class="share__canvas share__canvas5">
<image class="share__canvas5-image draw_canvas" data-type="image" data-url="./img/demo.png" src="./img/demo.png"></image>
<view class="share__canvas5-text draw_canvas" data-type="text" data-text="这是一段无边距文字">这是一段无边距文字</view>
<view class="share__canvas5-text-2 draw_canvas" data-type="text" data-text="这是一段margin文字">这是一段margin文字</view>
</view>
<view class="share__title">Canvas:</view>
<canvas canvas-id="canvas5" class="share__canvas"></canvas>
<view class="share__title">Wxml:</view>
<view class="share__canvas share__canvas4">
<view class="share__canvas4-block draw_canvas" data-type="text" data-text="Wxml2Cavnas库，是一个生成小程序分享图的通用方案，提供了两种绘制方式：">Wxml2Cavnas库，是一个生成小程序分享图的通用方案，提供了两种绘制方式：</view>
<view class="share__canvas4-block draw_canvas" data-type="text" data-text="封装基础图形的绘制接口，包括矩形、圆形、线条、图片、圆角图片、纯文本等，使用时只需要声明元素类型并提供关键数据即可，不需要再关注canvas的具体绘制过程；">封装基础图形的绘制接口，包括矩形、圆形、线条、图片、圆角图片、纯文本等，使用时只需要声明元素类型并提供关键数据即可，不需要再关注canvas的具体绘制过程；</view>
<image src="./img/demo.png" class="share__canvas4-image draw_canvas" data-type="image" data-url="./img/demo.png"></image>
<view class="share__canvas4-block draw_canvas" data-type="text" data-text="wxml直接转换成canvas元素，使用时传入待绘制的wxml节点的class类名，并且声明绘制此节点的类型（图片、文字等），会自动读取此节点的computedStyle，利用这些数据完成元素的绘制。">wxml直接转换成canvas元素，使用时传入待绘制的wxml节点的class类名，并且声明绘制此节点的类型（图片、文字等），会自动读取此节点的computedStyle，利用这些数据完成元素的绘制。</view>
</view>
<view class="share__title">Canvas: </view>
<canvas canvas-id="canvas4" class="share__canvas share__canvas4"></canvas>
<view class="share__title">Wxml:</view>
<view class="share__canvas share__canvas6">
<image class="share__canvas6-image draw_canvas" data-type="image" data-url="./img/demo.png" src="./img/demo.png" mode="top left" data-mode="top left"></image>
<image class="share__canvas6-image draw_canvas" data-type="image" data-url="./img/demo.png" src="./img/demo.png" mode="top" data-mode="top"></image>
<image class="share__canvas6-image draw_canvas" data-type="image" data-url="./img/demo.png" src="./img/demo.png" mode="top right" data-mode="top right"></image>
<image class="share__canvas6-image draw_canvas" data-type="image" data-url="./img/demo.png" src="./img/demo.png" mode="left" data-mode="left"></image>
<image class="share__canvas6-image draw_canvas" data-type="image" data-url="./img/demo.png" src="./img/demo.png" mode="center" data-mode="center"></image>
<image class="share__canvas6-image draw_canvas" data-type="image" data-url="./img/demo.png" src="./img/demo.png" mode="right" data-mode="right"></image>
<image class="share__canvas6-image draw_canvas" data-type="image" data-url="./img/demo.png" src="./img/demo.png" mode="bottom left" data-mode="bottom left"></image>
<image class="share__canvas6-image draw_canvas" data-type="image" data-url="./img/demo.png" src="./img/demo.png" mode="bottom" data-mode="bottom"></image>
<image class="share__canvas6-image draw_canvas" data-type="image" data-url="./img/demo.png" src="./img/demo.png" mode="bottom right" data-mode="bottom right"></image>
<image class="share__canvas6-image-2 draw_canvas" data-type="image" data-url="./img/demo.png" src="./img/demo.png" mode="scaleToFill" data-mode="scaleToFill"></image>
<image class="share__canvas6-image-2 draw_canvas" data-type="image" data-url="./img/demo.png" src="./img/demo.png" mode="aspectFit" data-mode="aspectFit"></image>
<image class="share__canvas6-image-2 draw_canvas" data-type="image" data-url="./img/demo.png" src="./img/demo.png" mode="aspectFill" data-mode="aspectFill"></image>
<image class="share__canvas6-image-2 draw_canvas" data-type="image" data-url="./img/demo.png" src="./img/demo.png" mode="widthFix" data-mode="widthFix"></image>
</view>
<view class="share__title">Canvas: </view>
<canvas canvas-id="canvas6" class="share__canvas share__canvas6"></canvas>
<view class="share__title">Result:</view>
<block wx:for="{{ imgs }}" wx:for-item="img" wx:key="img" wx:for-index="idx">
<image src="{{ img }}" class="share__result-img {{ idx === 3 || idx === 5 ? 'share__result-img-4' : ''}}" mode="widthFix"></image>
<button data-index="{{ idx }}" catchtap="saveImage" class="share__button">保存图片</button>
</block>
</view>
js:
import Wxml2Canvas from ‘…/…/src/index’;
Page({
data: {
imgs: []
},
onLoad (res) {
this.drawImage1();
setTimeout(() => {
this.drawImage2();
}, 300);
setTimeout(() => {
this.drawImage3();
}, 600)
setTimeout(() => {
this.drawImage4();
}, 900)
setTimeout(() => {
this.drawImage5();
}, 1200)
setTimeout(() => {
this.drawImage6();
}, 1500)
},
saveImage (evt) {
let index = evt.target.dataset.index;
wx.saveImageToPhotosAlbum({
filePath: this.data.imgs[index],
success(res) {
wx.showToast({
title: '保存成功',
icon: 'success'
})
},
fail () {
wx.showToast({
title: '保存失败',
icon: 'none'
})
}
})
},
drawImage1 () {
let self = this;
this.drawImage1 = new Wxml2Canvas({
width: 340,
height: 210,
element: 'canvas1',
background: '#f0f0f0',
progress (percent) {
},
finish(url) {
let imgs = self.data.imgs;
imgs.push(url);
self.setData({
imgs
})
},
error (res) {
}
});
let data = {
list: [{
type: 'wxml',
class: '.share__canvas1 .draw_canvas',
limit: '.share__canvas1',
x: 0,
y: 0
}]
}
this.drawImage1.draw(data);
},
drawImage2 () {
let self = this;
this.drawImage2 = new Wxml2Canvas({
width: 340,
height: 210,
element: 'canvas2',
background: '#f0f0f0',
progress (percent) {
},
finish(url) {
console.log(url)
let imgs = self.data.imgs;
imgs.push(url);
self.setData({
imgs
})
},
error (res) {
}
});
let data = {
list: [{
type: 'wxml',
class: '.share__canvas2 .draw_canvas',
limit: '.share__canvas2',
x: 0,
y: 0
}]
}
this.drawImage2.draw(data);
},
drawImage3 () {
let self = this;
this.drawImage3 = new Wxml2Canvas({
width: 340,
height: 210,
element: 'canvas3',
background: '#f0f0f0',
progress (percent) {
// console.log(percent)
},
finish(url) {
let imgs = self.data.imgs;
imgs.push(url);
self.setData({
imgs
})
},
error (res) {
}
});
let data = {
list: [{
type: 'wxml',
class: '.share__canvas3 .draw_canvas',
limit: '.share__canvas3',
x: 0,
y: 0
}]
}
this.drawImage3.draw(data);
},
drawImage4 () {
let self = this;
this.drawImage4 = new Wxml2Canvas({
width: 340,
height: 400,
element: 'canvas4',
background: '#f0f0f0',
progress (percent) {
// console.log(percent)
},
finish(url) {
let imgs = self.data.imgs;
imgs.push(url);
self.setData({
imgs
})
},
error (res) {
}
});
let data = {
list: [{
type: 'wxml',
class: '.share__canvas4 .draw_canvas',
limit: '.share__canvas4',
x: 0,
y: 0
}]
}
this.drawImage4.draw(data);
},
drawImage5 () {
let self = this;
this.drawImage5 = new Wxml2Canvas({
width: 340,
height: 210,
element: 'canvas5',
background: '#f0f0f0',
progress (percent) {
// console.log(percent)
},
finish(url) {
let imgs = self.data.imgs;
imgs.push(url);
self.setData({
imgs
})
},
error (res) {
}
});
let data = {
list: [{
type: 'wxml',
class: '.share__canvas5 .draw_canvas',
limit: '.share__canvas5',
x: 0,
y: 0
}]
}
this.drawImage5.draw(data);
},
drawImage6 () {
let self = this;
this.drawImage6 = new Wxml2Canvas({
width: 340,
height: 450,
element: 'canvas6',
background: '#f0f0f0',
progress (percent) {
// console.log(percent)
},
finish(url) {
let imgs = self.data.imgs;
imgs.push(url);
self.setData({
imgs
})
},
error (res) {
}
});
let data = {
list: [{
type: 'wxml',
class: '.share__canvas6 .draw_canvas',
limit: '.share__canvas6',
x: 0,
y: 0
}]
}
this.drawImage6.draw(data);
}
});
效果图：
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
0
0- 0
已为社区贡献29条内容
所有评论(0)