此代码是基于uni写的(编写微信小程序的第三方框架) 一个组件 有用这个框架的可以直接用,原生的微信小程序与这个相差不大,(只需改下事件监听方式,标签,参数传递就可以了),图片先打开试下,打不开就换下图片 直接用 没问题
<template>
<div>
<div :class="['share', visible ? 'show' : '']" @click="handleClose">
<canvas
class="canvas-hide"
canvas-id="share"
:style="{'width':canvasWidth*2 + 'rpx','height':canvasHeight*2 +'rpx'}"
/>
<div class="content" :style="responsiveScale">
<img
@click.stop="nothing"
class="canvas"
@longpress="handleSave"
:src="imageFile"
:style="{'width':canvasWidth +'rpx','height':canvasHeight + 'rpx'}"
>
</div>
</div>
</div>
</template>
<script>
//canvas UI以750图纸为标准 canvas测量值以750 rpx为标准
//文档上说y轴左上角 我测试是左下角
// ctx.fillText(
// nickName,
// rpx2px(160),
// rpx2px(80),
// )
function getImageInfo(url) {
return new Promise((resolve, reject) => {
wx.getImageInfo({
src: url,
success: resolve,
fail: reject
});
});
}
function createRpx2px() {
const { windowWidth } = wx.getSystemInfoSync();
return function(rpx) {
//以rpx为单位
return windowWidth / 750 * rpx * 2;
};
}
const rpx2px = createRpx2px();
function canvasToTempFilePath(option, context) {
return new Promise((resolve, reject) => {
wx.canvasToTempFilePath(
{
...option,
success: resolve,
fail: reject
},
context
);
});
}
function saveImageToPhotosAlbum(option) {
return new Promise((resolve, reject) => {
wx.saveI