uniapp 多端保存图片的逻辑（app端，普通浏览器端，微信内置浏览器端）

app端保存图片成功的效果

普通浏览器端保存图片成功的效果

微信内置浏览器端保存图片成功的效果

有参考的方法：uniapp 利用html2canvas将移动端指定区域保存为图片

uniapp 利用html2canvas将移动端指定区域保存为图片_html2canvas 保存图片 报错 uniapp-CSDN博客

方法流程：

问题描述：移动端保存图片时，直接保存仅能保存当前屏幕大小的图片；需求需要保存指定区域的内容。

问题解决：结合html2canvas与uniapp的renderjs解决。

第一步：配置：html2canvas

npm install --save html2canvas

第二步：视图部分:

第三步script部分：

我的代码：

shareAre.vue

main.js

import Vue from 'vue'
import Vuex from 'vuex'
import App from './App'
import ajax from './common/request.js'
import jk from "./common/interface.js"
import common from "./common/common.js"
import $ from "./common/jquery-1.12.4.min.js"
//引入vuex
import store from './store'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)
Vue.use(Vuex)

import html2canvas from 'html2canvas';
Vue.prototype.html2canvas = html2canvas


//把vuex定义为全局变量
Vue.prototype.$store = store
Vue.prototype.ajax = ajax
Vue.prototype.jk = jk//所有接口
Vue.prototype.common = common//所有公用内容
Vue.prototype.$ = $

Vue.config.productionTip = false

App.mpType = 'app'

const app = new Vue({
	...App,
	//挂载
	store
})
app.$mount()