共计 15438 个字符，预计需要花费 39 分钟才能阅读完成。
能在安卓 app 上应用动静增加文字、并且文字可能拖拽、编辑、删除、缩放、设置色彩、字体大小、文字排列形式，还有能够插入图片、并且图片也能缩放、删除。
假如场景：用户在后盾页面上配置自定义海报，须要将数据传到 app 并展现。
我应用的是 fabricjs。官网：http://fabricjs.com/
实现的原理就是应用 webview 间接实现，我在网上找了很久也没有找到比拟快的办法实现，其实有一种，那就是应用 canvas 去实现，然而 canvas 的绘制很简单、麻烦。大佬能够试试 emmm
间接上代码了 emmm，做个笔记。
index.vue 的代码如下：
<template>
<view class="promotionPosterEdit">
<web-view :src="'../../../hybrid/html/promotionPosterEdit/index.html?data=' + obj"@message="getMessage"ref="wv"></web-view>
</view>
</template>
<script>
import {pathToBase64, base64ToPath} from '../../../js_sdk/mmmm-image-tools/index.js';
export default {data() {
return {
obj: null,
currentWebview: null,
}
},
onLoad() {let statusBarHeight = uni.getSystemInfoSync()['statusBarHeight']
let top = uni.getStorageSync('navbarHeight') + 30
let height = uni.getSystemInfoSync()['screenHeight'] - 64 - uni.getStorageSync('navbarHeight') - 74
let width = uni.getSystemInfoSync()['screenWidth'] - 100
let screenHeight = uni.getSystemInfoSync()['screenHeight']
let obj = {
statusBarHeight: statusBarHeight,
top: top,
height: height,
width: width,
screenHeight: screenHeight
}
this.obj = JSON.stringify(obj) // 这里是传给 webview 的参数用来调整款式的
},
onReady() {
const self = this
self.currentWebview = self.$scope.$getAppWebview().children()[0]
},
methods: {getMessage(e) {console.log('接管 html 发送的数据', e.detail)
if(e.detail.data[0].msg === 'openCamera') { // 关上手机相册
uni.chooseImage({
count: 1,
success: (res) => {console.log('长期门路', res.tempFilePaths[0])
pathToBase64(res.tempFilePaths[0]).then(base64 => {let info = base64.replace(/[\r\n]/g, '')
const self = this;
self.currentWebview.evalJS(`uniEvent(${JSON.stringify(info)})`); //app 向 html 发送数据
}).catch(error => {console.log('转换失败：', error);
});
}
})
} else if(e.detail.data[0].msg === 'save') { // 保留到手机相册
console.log('app', e.detail.data[0].canvas)
uni.showLoading({title: '保留中...'})
let imageStr = e.detail.data[0].canvas
base64ToPath(imageStr).then(path => {console.log('转换下载图片', path)
this.saveImage(path);
}).catch(error => {console.error('长期门路转换出错了：', error);
});
} else if(e.detail.data[0].msg === 'wx') { // 转发到微信
uni.showToast({
icon: 'none',
title: '暂未凋谢'
})
} else if(e.detail.data[0].msg === 'friend') { // 转发到微信朋友圈
uni.showToast({
icon: 'none',
title: '暂未凋谢'
})
} else if(e.detail.data[0].msg === 'addEmptyText') { // 不能增加空文字
uni.showToast({
icon: 'none',
title: '请输出文字'
})
}
},
// 保留 canvas 图片到手机相册
saveImage(filePath) {
uni.saveImageToPhotosAlbum({
filePath, // 须要临时文件门路，base64 无奈保留
success: () => {uni.hideLoading()
uni.showToast({
icon: 'none',
title: '保留胜利'
})
},
fail: (error) => {console.error('保留失败，请重试', error);
}
});
},
}
}
</script>
<style lang="scss" scoped>
.promotionPosterEdit {
min-height: 100vh;
background-color: #303030;
}
</style>/hybrid/html/promotionPosterEdit/index.html 的代码如下：
应用的插件 html2canvas 1.4.1 https://html2canvas.hertzen.com
fabricjs5.3.0
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title> 网络网页 </title>
<link rel="stylesheet" href="./css/index.css" />
</head>
<body>
<div class="post-message-section">
<div class="headers">
<div class="header">
<div class="left item" data-action="navigateBack">
<div class="back">
<img src="../img/back.png" alt="back" />
</div>
</div>
<div class="title item" style="color: #fff">
<div class="txt"> 宣传海报编辑 </div>
</div>
<div class="right item">
<div class="share">
<img src="../img/share.png" alt="back" />
</div>
</div>
</div>
</div>
<div class="myCanvas">
<canvas id="canvas"></canvas>
</div>
<div class="shares">
<div class="sharesmask"></div>
<div class="content">
<div class="itemsurl">
<div class="item wx">
<div class="imgs">
<img src="../img/wechat.png" alt="wechat" srcset="" />
</div>
<div class="txt"> 微信 </div>
</div>
<div class="item friends">
<div class="imgs">
<img src="../img/friends.png" alt="friends" srcset="" />
</div>
<div class="txt"> 朋友圈 </div>
</div>
<!-- <div class="item">
<div class="imgs">
<img src="../../../static/download.png" alt="download" srcset="" />
</div>
<div class="txt"> 生成海报 </div>
</div> -->
</div>
<div style="height: 6px;width: 100%;background-color: #ececec;"></div>
<div class="cancel"> 勾销 </div>
</div>
</div>
<div class="addText">
<div class="addTextmask"></div>
<div class="addTextContent">
<div class="title"> 文字款式设置 </div>
<div class="tabtool">
<div class="items">
<input class="color" type="color" value="#000000" />
</div>
<div class="item bold">
<img src="../img/bold.png" alt="bold" srcset="" />
</div>
<div class="item italic">
<img src="../img/italic.png" alt="italic" srcset="" />
</div>
<div class="item amplify">
<img src="../img/amplify.png" alt="amplify" srcset="" />
</div>
<div class="item reduce">
<img src="../img/reduce.png" alt="reduce" srcset="" />
</div>
</div>
<div class="text">
<textarea id="MainText" cols="30" row="10" style="font-size: 18px;" placeholder="请输出文字"></textarea>
</div>
<div class="confirm">
<button class="cancelAddText btn btn-red" type="button"> 勾销 </button>
<button class="confirmAddText btn" type="button"> 确认 </button>
</div>
</div>
</div>
<div class="footer">
<div class="itemBox">
<div class="item reload">
<div class="icons">
<img src="../img/reload.png" alt="reload" />
</div>
<div class="txt"> 复原默认 </div>
</div>
<div class="item pic">
<div class="icons">
<img src="../img/pic.png" alt="pic" />
</div>
<div class="txt"> 图片 / 二维码 </div>
</div>
<div class="item edit-pen">
<div class="icons">
<img src="../img/edit-pen.png" alt="edit-pen" />
</div>
<div class="txt"> 增加文字 </div>
</div>
<div class="item downs">
<div class="icons">
<img src="../img/downs.png" alt="downs" />
</div>
<div class="txt"> 保留本地 </div>
</div>
</div>
</div>
<div class="deleteFooter">
<div class="delete">
<div class="box">
<img src="../img/delete.png" alt="delete" srcset="" />
<div class="tip"> 拖到此处删除 </div>
</div>
</div>
<div class="deleteactive">
<div class="box">
<img src="../img/deleteactive.png" alt="deleteactive" srcset="" />
<div class="tip"> 松手即可删除 </div>
</div>
</div>
</div>
<input class="imageinput" style="display: none;" type="image" accept="image/jpeg,image/jpg,image/png" capture />
</div>
<script src="../js/fabric.js"></script>
<script src="../js/html2canvas.min.js"></script>
<script type="text/javascript">
var userAgent = navigator.userAgent;
if (/quickapp/i.test(userAgent)) {
// quickapp
document.write('<script type="text/javascript"src="https://quickapp/jssdk.webview.min.js"><\/script>');
}
if (!/toutiaomicroapp/i.test(userAgent)) {document.querySelector('.post-message-section').style.visibility = 'visible';
}
</script>
<!-- uni 的 SDK -->
<script src="../js/uni-webview.js"></script>
<!-- <script type="text/javascript" src="https://unpkg.com/@dcloudio/uni-webview-js@0.0.1/index.js"></script> -->
<script type="text/javascript">
// console.log('接管参数', decodeURIComponent(location.href.split('data=')[1]))
let params = JSON.parse(decodeURIComponent(location.href.split('data=')[1]))
document.getElementsByClassName('headers')[0].style.paddingTop = params.statusBarHeight + 'px'
document.getElementsByClassName('myCanvas')[0].style.paddingTop = params.top + 30 + 'px'
document.getElementById('canvas').setAttribute('width', params.width + 'px')
document.getElementById('canvas').setAttribute('height', params.height + 'px')
document.getElementsByClassName('post-message-section')[0].style.height = params.screenHeight + 'px'
// 生成 canvas
var canvas = new fabric.Canvas('canvas');
// ... 这里能够写 canvas 对象的一些配置，前面将会介绍
// console.log('fabric.Textbox', fabric.Textbox)
// 如果 <canvas> 标签没设置宽高，能够通过 js 动静设置
// canvas.setWidth(350)
// canvas.setHeight(200)
function initCanvas() {
// 读取图片地址，设置画布背景
fabric.Image.fromURL('../img/10801920.png', (img) => {
img.set({
// 通过 scale 来设置图片大小，这里设置和画布一样大
scaleX: canvas.width / img.width,
scaleY: canvas.height / img.height,
});
// 设置背景
canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas));
canvas.renderAll();}, {crossOrigin: 'anonymous' // 加上这个是因为我须要将海报下载到手机相册，容许跨域，如果没设置是下载不了图片的});
// 通过图片门路增加
fabric.Image.fromURL('../img/10801920.png', (img) => {
img.set({
scaleX: canvas.width / img.width / 2,
scaleY: canvas.height / img.height / 2,
hasControls: true, // 是否开启图层的控件
});
// 增加对象后, 如下图
canvas.add(img);
// deleteDiv(img)
}, {crossOrigin: 'anonymous'});
// IText 不可让文字竖排。textbox 能够让文字竖排，主动依据宽度填写文字
const IText = new fabric.Textbox('这是一段初始默认文字', {
left: 50,
top: 50,
// width: 50, // 不设置宽度, 拉伸主动换行
fontSize: 18, // 字体大小
fontWeight: 600, // 字体粗细
fill: '#aaaaff', // 字体色彩
fontStyle: 'italic', // 斜体
splitByGrapheme: true, //true 文本会实时依据宽度进行换行
hasControls: true, // 元素操作控件显示 \ 即描边正方体
// fontFamily: 'Delicious', // 设置字体
// fontFamily: 'monospace', // 设置字体
// fontFamily: 'fantasy', // 设置字体
// stroke: 'green', // 描边色彩
// strokeWidth: 3, // 描边宽度
// borderColor: 'orange',
// editingBorderColor: 'orange' // 点击文字进入编辑状态时的边框色彩
}, {crossOrigin: 'anonymous'});
// 增加文字
canvas.add(IText)
// deleteDiv(IText)
}
initCanvas()
// 删除元素操作
function deleteDiv(target) {target['on']('moving', function(info) {document.getElementsByClassName('deleteFooter')[0].style.display = 'block'
if(info.pointer.y > params.height) {document.getElementsByClassName('delete')[0].style.display = 'none'
document.getElementsByClassName('deleteactive')[0].style.display = 'block'
} else {document.getElementsByClassName('delete')[0].style.display = 'block'
document.getElementsByClassName('deleteactive')[0].style.display = 'none'
}
})
target['on']('mouseup', function(info) {if(info.pointer.y > params.height + 5) {canvas.remove(target)
}
document.getElementsByClassName('delete')[0].style.display = 'block'
document.getElementsByClassName('deleteactive')[0].style.display = 'none'
document.getElementsByClassName('deleteFooter')[0].style.display = 'none'
})
}
// webview 页面加载实现
document.addEventListener('UniAppJSBridgeReady', function() {
// webview 加载实现，显示页面
document.getElementsByClassName('post-message-section')[0].style.display = 'block'
// 返回上一页
document.querySelector('.left').addEventListener('click', function(evt) {uni.navigateBack()
});
// 分享
document.querySelector('.right').addEventListener('click', function(evt) {console.log(getComputedStyle(document.documentElement).getPropertyValue("--sat"))
console.log(getComputedStyle(document.documentElement).getPropertyValue("--sab"))
document.querySelector('.shares').style.display = 'block'
slideTimer(0, 'add', 1, 30)
});
document.querySelector('.sharesmask').addEventListener('click', function(evt) {console.log('点击分享遮罩层', evt.target)
slideTimer(200, 'dec', 1, 30)
})
// 勾销分享
document.querySelector('.cancel').addEventListener('click', function(evt) {slideTimer(200, 'dec', 1, 30)
})
// 高度动画
function slideTimer(height, type, setup, times) {
let timer = null
let heights = height
let setups = setup
timer = setInterval(() => {if(type === 'add') {heights += 10 * setups} else {heights -= 10 * setups}
console.log(Number(document.querySelector('.content').style.height.replace('px', '')))
document.querySelector('.content').style.height = heights + 'px'
setups++
if (Number(heights) <= 0 || Number(document.querySelector('.content').style.height.replace('px', '')) >= 200) {clearInterval(timer)
if(type !== 'add') {document.querySelector('.shares').style.display = 'none'
}
heights = 0
setups = 1
}
}, times)
}
// 分享到微信
document.querySelector('.wx').addEventListener('click', function(evt) {console.log('分享到微信')
uni.postMessage({
data: {msg: 'wx'}
});
})
// 分享到朋友圈
document.querySelector('.friends').addEventListener('click', function(evt) {console.log('分享到朋友圈')
uni.postMessage({
data: {msg: 'friend'}
});
})
// 点击增加文字
document.querySelector('.edit-pen').addEventListener('click', function(evt) {console.log('增加文字')
document.querySelector('.addText').style.display = 'block'
initAddText()
document.getElementsByClassName('color')[0].onchange = function(evt) {console.log('色彩扭转', evt.target.value)
document.getElementById('MainText').style.color = evt.target.value
}
})
// 点击加粗文字
document.querySelector('.bold').addEventListener('click', function(evt) {console.log('点击加粗文字')
if(document.getElementById('MainText').style.fontWeight === 'bold') {document.getElementById('MainText').style.fontWeight = 'normal'
} else {document.getElementById('MainText').style.fontWeight = 'bold'
}
})
// 点击斜体文字
document.querySelector('.italic').addEventListener('click', function(evt) {console.log('点击斜体文字')
if(document.getElementById('MainText').style.fontStyle === 'italic') {document.getElementById('MainText').style.fontStyle = 'normal'
} else {document.getElementById('MainText').style.fontStyle = 'italic'
}
})
// 点击文字变大
document.querySelector('.amplify').addEventListener('click', function(evt) {console.log('点击文字变大')
console.log(Number(document.getElementById('MainText').style.fontSize.replace('px', '')))
console.log(document.getElementById('MainText').style.fontSize.replace('px', ''))
document.getElementById('MainText').style.fontSize = Number(document.getElementById('MainText').style.fontSize.replace('px', ''))+1 +'px'
})
// 点击文字变小
document.querySelector('.reduce').addEventListener('click', function(evt) {console.log('点击文字变小')
if(Number(document.getElementById('MainText').style.fontSize.replace('px', '')) === 12) {console.log('无奈再减了')
} else {document.getElementById('MainText').style.fontSize = Number(document.getElementById('MainText').style.fontSize.replace('px', ''))-1 +'px'
}
})
// 确认增加文字到 canva 中
document.getElementsByClassName('confirmAddText')[0].addEventListener('click', function(evt) {console.log('确认增加到 canva 中')
if(document.getElementById('MainText').value !== '') {
// IText 不可让文字竖排。textbox 能够让文字竖排，主动依据宽度填写文字
const IText = new fabric.Textbox(document.getElementById('MainText').value, {
left: 50,
top: 50,
// width: 50, // 不设置宽度, 拉伸主动换行
fontSize: Number(document.getElementById('MainText').style.fontSize.replace('px', '')), // 字体大小
fontWeight: document.getElementById('MainText').style.fontWeight, // 字体粗细
fill: document.getElementById('MainText').style.color, // 字体色彩
fontStyle: document.getElementById('MainText').style.fontStyle, // 斜体
splitByGrapheme: true, //true 文本会实时依据宽度进行换行
hasControls: true, // 元素操作控件显示 \ 即描边正方体
}, {crossOrigin: 'anonymous'});
// 增加文字
canvas.add(IText);
deleteDiv(IText)
initAddText()
document.querySelector('.addText').style.display = 'none'
} else {
uni.postMessage({
data: {msg: 'addEmptyText'}
});
}
})
// 敞开增加文字
document.querySelector('.addTextmask').addEventListener('click', function(evt) {initAddText()
document.querySelector('.addText').style.display = 'none'
})
// 勾销增加文字
document.getElementsByClassName('cancelAddText')[0].addEventListener('click', function(evt) {console.log('勾销增加文字')
initAddText()
document.querySelector('.addText').style.display = 'none'
})
// 初始化增加文字
function initAddText() {document.getElementById('MainText').style.fontWeight = 'normal'
document.getElementById('MainText').style.fontStyle = 'normal'
document.getElementById('MainText').style.fontSize = '18px'
document.getElementById('MainText').style.color = '#000000'
document.getElementById('MainText').value = ''document.getElementsByClassName('color')[0].value ='#000000'
}
// 复原默认 canvas
document.querySelector('.reload').addEventListener('click', function(evt) {console.log('复原默认')
canvas.clear();
initCanvas()})
// app 被动与 html 通信，用于增加图片到 canvas 中
function addUniEvenPassthrough() {window.uniEvent = function(info) {console.log('获取完相册了', info)
fabric.Image.fromURL(info, (img) => {
img.set({
scaleX: canvas.width / img.width / 2,
scaleY: canvas.height / img.height / 2,
hasControls: true, // 是否开启图层的控件
});
// 增加对象后, 如下图
canvas.add(img);
deleteDiv(img)
}, {crossOrigin: 'anonymous'});
}
}
addUniEvenPassthrough()
// 点击了图片 / 二维码
document.querySelector('.pic').addEventListener('click', function(evt) {console.log('点击了图片 / 二维码')
uni.postMessage({
data: {msg: 'openCamera'}
});
})
// 海报保留本地
document.querySelector('.downs').addEventListener('click', function(evt) {console.log('保留本地')
if (document.getElementsByClassName('canvasimg')[0]) {document.getElementsByClassName('canvasimg')[0].remove()}
let dom = document.getElementById('canvas')
var img = new Image();
img.crossOrigin = "anonymous"; // 要害、容许跨域
var image = dom.toDataURL('image/png')
img.src = image;
img.setAttribute('style','position: absolute; top: 0px; left: -666px;width: 320px; height: 750px;')
img.setAttribute('class', 'canvasimg')
document.body.appendChild(img);
let canvasdom = document.getElementsByTagName('canvas')[0]
html2canvas(canvasdom, {
width: canvasdom.clientWidth, //dom 原始宽度
height: canvasdom.clientHeight,
scrollY: 0, // html2canvas 默认绘制视图内的页面，须要把 scrollY，scrollX 设置为 0
scrollX: 0,
useCORS: true, // 反对跨域
scale: 2, // 设置生成图片的像素比例，默认是 1，如果生成的图片含糊的话能够开启该配置项。（设置为 1 无奈触发长按扫一扫）}).then((res) => {console.log(res)
uni.postMessage({
data: {
msg: 'save',
canvas: res.toDataURL('image/png').replace(/[\r\n]/g, '')
}
});
}).catch(err => {console.log('生成失败')
})
})
});
</script>
</body>
</html>
效果图：
正文完
