https://github.com/MY729/front-common-funtion/blob/master/picture-code-demo/README.md
미리보기 주소https://my729.github.io/front-common-funtion/picture-code-demo/picture-code.html
준비vue + element-ui 기반 데모
먼저 html 파일을 만들고 vue 및 element-ui를 소개합니다(스타일 파일도 있음에 유의하세요).
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width,initial-scale=1.0> <meta http-equiv=X-UA -호환 가능한 콘텐츠=ie=edge> <title>문서</title> <!-- elelment-ui style--> <link rel=stylesheet href=https://unpkg.com/element-ui/lib/theme-chalk/index.css></head><body> </body><!-- vue 소개 --><script src=https: //cdn.jsdelivr.net/npm/vue></script><!-- element-ui 소개 --><script src=https://unpkg.com/element-ui/lib/index.js></script></html>
다음으로 코딩 함수를 작성할 수 있습니다.
구현 아이디어
캔버스에 코딩할 그림을 그린다
// 그리기 이미지 초기화 toCode (currentImg) { this.$nextTick(() => { // 그릴 캔버스의 부모 요소 노드를 가져옵니다. let parentId = document.getElementById('parentId') // 이미지 초기화 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) } } })} 코딩 버튼을 클릭하면 코딩 영역이 그려집니다.아이디어:
// 코딩 대화 코드(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 = '익명' drawImage.src = img drawImage.onload = () => { ctx.drawImage(drawImage, 0, 0, 720, 500) } // 마우스 클릭 parentId.onmousedown = e => { ctx.clearRect(0, 0, canvas.width, canvas. 높이) ctx.drawImage(drawImage, 0, 0, 720, 500) this.flag = true this.clickX = e.offsetX // 마우스를 클릭했을 때 X this.clickY = e.offsetY // 마우스를 클릭했을 때 Y } // ParentId.onmouseup = () => { this. = false } // 마우스 누름 parentId.onmousemove = e => { if (this.flag) { ctx.clearRect(0, 0, canvas.width, canvas.height) ctx.drawImage(drawImage, 0, 0, 720, 500) ctx.beginPath() let 픽셀 = [] // 2차원 배열, 각 하위 배열에는 5개의 값이 있습니다. (X 좌표, y 좌표를 그립니다. 직사각형의 왼쪽 상단, 직사각형의 너비와 높이, 생성된 4자리 난수를 색상값으로 사용) for (let x = 0; x < (e.offsetX - this.clickX) / 15; x++) { for (let y = 0; y < (e.offsetY - this.clickY) / 15; y++) { pixel.push([(x * 15 + this.clickX), (y * 15 + this.clickY ), 15, 15, Math.floor(Math.random() * 9999)]) } for (let y = 0; y > (e.offsetY - this.clickY) / 15; y--) { pixel.push([(x * 15 + this.clickX), (y * 15 + this.clickY), 15, 15, Math.floor( Math.random() * 9999)]) } } for (let x = 0; x > (e.offsetX - this.clickX) / 15; x--) { for (let y = 0; y > (e.offsetY - this.clickY) / 15; y--) { pixel.push([(x * 15 + this.clickX), (y * 15 + this.clickY), 15, 15, Math.floor(Math.random() * 9999)]) } for (let y = 0; y < (e.offsetY - this.clickY) / 15; y++) { pixel.push([(x * 15 + this.clickX), (y * 15 + this.clickY), 15, 15, Math.floor(Math. random() * 9999)]) } } // 배열을 탐색하여 작은 정사각형 블록을 그립니다. for (let i = 0; i < pixel.length; i++) { ctx.fillStyle = '#bf' + 픽셀[i][4] ctx.fillRect(픽셀[i][0], 픽셀[i][1], 픽셀[i][2], 픽셀[i][ 3]) } ctx.fill() ctx.closePath() } } }}구하다
// 대화 상자 업로드() 저장 { let canvas = document.getElementById('imgCanvas') let tempImg = canvas.toDataURL('image/png') let imgURL = document.getElementById('imgURL') imgURL.crossOrigin = 'Anonymous' imgURL .src = 임시Img} 소스 코드미리보기를 위해 html 파일로 복사
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width,initial-scale=1.0> <meta http-equiv=X-UA -Compatible content=ie=edge> <title>캔버스를 사용하여 단계별로 이미지 코딩 구현</title> <!-- elelment-ui style--> <link rel=stylesheet href=https://unpkg.com/element-ui/lib/theme-chalk/index.css> <style type=text/css> .rc-code__buttons { 여백: 20px } </style></head> <body> <div id=app> <div class=rc-code__buttons> <h1>vue 프로젝트에서 캔버스를 사용하여 단계별로 이미지 코딩 기능 구현</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 = '익명' 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) } } }) }, // 다이얼로그 코드 코딩(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 = () => { ctx.drawImage(drawImage, 0, 0, 720, 500) } parentId.onmousedown = e => { ctx.clearRect(0, 0, canvas.width, canvas .높이) ctx.drawImage(drawImage, 0, 0, 720, 500) this.flag = true this.clickX = e.offsetX // 마우스를 클릭했을 때 X this.clickY = e.offsetY // 마우스를 클릭했을 때 Y } parentId.onmouseup = () => { this.flag = false } parentId.onmousemove = e => { if (this.flag) { ctx.clearRect(0, 0, canvas.width, canvas.height) ctx.drawImage(drawImage, 0, 0, 720, 500) ctx.beginPath() let 픽셀 = [] // 2차원 배열, 각 하위 배열에는 5개의 값이 있습니다. (X 좌표, y 좌표를 그립니다. 직사각형의 왼쪽 상단, 직사각형의 너비와 높이, 생성된 4자리 난수를 색상값으로 사용) for (let x = 0; x < (e.offsetX - this.clickX) / 15; x++) { for (let y = 0; y < (e.offsetY - this.clickY) / 15; y++) { pixel.push([(x * 15 + this.clickX), (y * 15 + this.clickY ), 15, 15, Math.floor(Math.random() * 9999)]) } for (let y = 0; y > (e.offsetY - this.clickY) / 15; y--) { pixel.push([(x * 15 + this.clickX), (y * 15 + this.clickY), 15, 15, Math.floor( Math.random() * 9999)]) } } for (let x = 0; x > (e.offsetX - this.clickX) / 15; x--) { for (let y = 0; y > (e.offsetY - this.clickY) / 15; y--) { pixel.push([(x * 15 + this.clickX), (y * 15 + this.clickY), 15, 15, Math.floor(Math.random() * 9999)]) } for (let y = 0; y < (e.offsetY - this.clickY) / 15; y++) { pixel.push([(x * 15 + this.clickX), (y * 15 + this.clickY), 15, 15, Math.floor(Math. 무작위() * 9999)]) } } for (let i = 0; i < 픽셀.길이; i++) { ctx.fillStyle = '#bf' + 픽셀[i][4] ctx.fillRect(픽셀[i][0], 픽셀[i][1], 픽셀[i][2], 픽셀[i][3]) } ctx .fill() ctx.closePath() } } } }, // 대화 상자 업로드 저장() { let canvas = document.getElementById('imgCanvas') let tempImg = canvas.toDataURL('image/png') let imgURL = document.getElementById('imgURL') imgURL.crossOrigin = 'Anonymous' imgURL.src = tempImg } }})</script></html>위의 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.