<title>使用canvas一步步实现图片打码功能</title>
<!-- elelment-ui样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<style type="text/css">
.rc-code__buttons {
margin: 20px;
}
</style>
</head>
<body>
<div id="app">
<div class="rc-code__buttons">
<h1>vue项目中使用canvas一步步实现图片打码功能</h1>
<el-button type="primary" @click="dialogCode(data.img_url)">打码</el-button>
<el-button type="success" @click="dialogUpload()">保存</el-button>
</div>
<el-row>
<el-col :span="12"><h3>点击打码按钮，在图片上绘制打码区域； 点击保存，生成打码后的图片</h3></el-col>
<el-col :span="12"><h3>保存后的图片</h3></el-col>
<el-col :span="12"><div id="parentId"></div></el-col>
<el-col :span="12"><img id="imgURL"/></el-col>
</el-row>
</div>
</body>
<!-- 引入vue -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!-- 引入element-ui -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
new Vue({
el: '#app',
data () {
return {
data: {
img_url: 'https://avatars0.githubusercontent.com/u/26196557?s=460&v=4'
},
flag: false, // 是否绘制矩形
clickX: '', // 开始绘制矩形时，鼠标点击时的x坐标
clickY: '' // 开始绘制矩形时，鼠标点击时的y坐标
}
},
mounted() {
this.toCode(this.data.img_url)
},
methods: {
// 初始化 绘制图片
toCode (currentImg) {
this.$nextTick(() => {
let parentId = document.getElementById('parentId')
let drawImg = new Image()
drawImg.setAttribute('crossOrigin', 'anonymous')
drawImg.crossOrigin = 'Anonymous'
drawImg.src = currentImg
let addCanvas = document.createElement('canvas')
parentId.appendChild(addCanvas)
let canvas = parentId.lastElementChild
canvas.id = 'imgCanvas'
if (canvas.getContext) {
let ctx = canvas.getContext('2d')
drawImg.onload = function () {
canvas.width = 720
canvas.height = 500
ctx.drawImage(drawImg, 0, 0, 720, 500)
}
}
})
},
// 打码
dialogCode (img) {
let parentId = document.getElementById('parentId')
let canvas = document.getElementById('imgCanvas')
if (canvas.getContext) {
let ctx = canvas.getContext('2d')
let drawImage = new Image()
drawImage.crossOrigin = 'Anonymous'
drawImage.src = img
drawImage.onload = () => {
