尧图网站建设 
第一版html head meta charsetutf-8 titlePic-Editor/title /head body h5 styletext-align:center;wurd/h5 div stylemargin:10px 0px; input idimg-file typefile / button onclickimgReset()Reset/button button idhandwriting-undoUndo/button button idhandwriting-redoRedo/button /div div stylemargin:10px 0px; div labelCut: /label labelleft-top/label input idcut-lt1 typenumber stylewidth:77px; / input idcut-lt2 typenumber stylewidth:77px; / labelwidth/label input idcut-width typenumber stylewidth:77px; / labelheight/label input idcut-height typenumber stylewidth:77px; / button onclickimgCut()Cut/button /div /div div stylemargin:10px 0px; labelHandWriting: /label labelColor/label select idhandwriting-color default#000 option value#000Black/option option value#fffWhite/option /select labelWidth/label input idhandwriting-width typenumber step0.1 value2 stylewidth:77px; labelLineCap/label select idhandwriting-lineCap defaultround option valueroundRound/option option valuebuttButt/option option valuesquareSquare/option /select labelLineJoin/label select idhandwriting-lineJoin defaultround option valueroundRound/option option valuemiterMiter/option option valuebevelBevel/option /select button idhandwriting-stateDisabled/button /div div stylemargin:10px 0px; canvas idcanvas width0 height0/canvas /div /body script var imgEle document.getElementById(img-file); var img new Image(); var canvas document.getElementById(canvas); var ctx canvas.getContext(2d); var hwHistory []; var hwHistoryCurrentIndex -1; /script script function setCanvasTitle(title) { if (title) { canvas.title title; } } function imgReset() { canvas.width img.width; canvas.height img.height; ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.drawImage(img, 0, 0); var imgData ctx.getImageData(0, 0, canvas.width, canvas.height); hwHistoryCurrentIndex -1; hwHistory[hwHistoryCurrentIndex] imgData; } function imgCut() { console.log(cut); var lt1 document.getElementById(cut-lt1).value; var lt2 document.getElementById(cut-lt2).value; var width document.getElementById(cut-width).value; var height document.getElementById(cut-height).value; lt1 lt1 ? lt1 : 0; lt2 lt2 ? lt2 : 0; width width ? width : 0; height height ? height : 0; lt1 lt1 0 ? 0 : lt1; lt2 lt2 0 ? 0 : lt2; width width 0 ? canvas.width - lt1 : width; height height 0 ? canvas.height - lt2 : height; width width canvas.width ? canvas.width : width; height height canvas.height ? canvas.height : height; var newImg new Image(); newImg.onload function () { canvas.width width; canvas.height height; setCanvasTitle(width , height); ctx.clearRect(0, 0, width, height); ctx.drawImage(newImg, lt1, lt2, width, height, 0, 0, width, height); var imgData ctx.getImageData(0, 0, canvas.width, canvas.height); hwHistoryCurrentIndex hwHistoryCurrentIndex 1; hwHistory[hwHistoryCurrentIndex] imgData; }; newImg.src canvas.toDataURL(); } /script script var hwStateEnable false; var isDrawing false; var lastX 0; var lastY 0; function startDrawing(e) { if (!hwStateEnable) return; isDrawing true;[lastX, lastY] getPosition(e); } function draw(e) { if (!isDrawing) return; ctx.beginPath(); ctx.moveTo(lastX, lastY);[currentX, currentY] getPosition(e); ctx.lineTo(currentX, currentY); ctx.stroke();[lastX, lastY] [currentX, currentY]; } function stopDrawing() { if (isDrawing) { var imgData ctx.getImageData(0, 0, canvas.width, canvas.height); hwHistoryCurrentIndex hwHistoryCurrentIndex 1; hwHistory[hwHistoryCurrentIndex] imgData; } isDrawing false; } function getPosition(e) { var rect canvas.getBoundingClientRect(); if (e.type.indexOf(touch) ! -1) { var touch e.touches[0] || e.changedTouches[0]; return [touch.clientX - rect.left, touch.clientY - rect.top]; } return [e.clientX - rect.left, e.clientY - rect.top]; } /script script var hwColorEle document.getElementById(handwriting-color); var hwWidthEle document.getElementById(handwriting-width); var hwLineCapEle document.getElementById(handwriting-lineCap); var hwLineJoinEle document.getElementById(handwriting-lineJoin); var hwStateEle document.getElementById(handwriting-state); var hwUndoEle document.getElementById(handwriting-undo); var hwRedoEle document.getElementById(handwriting-redo); imgEle.addEventListener(change, function (e) { var file e.target.files[0]; if (!file) { return; } var imgReader new FileReader(); imgReader.onload function (event) { img.onload function () { imgReset(); imgEle.title img.width , img.height; }; img.src event.target.result; }; imgReader.readAsDataURL(file); }); ctx.stokeStyle hwColorEle.value; ctx.lineWidth hwWidthEle.value; ctx.lineCap hwLineCapEle.value; ctx.lineJoin hwLineJoinEle.value; hwColorEle.addEventListener(change, function (e) { if (hwStateEnable) { ctx.strokeStyle hwColorEle.value; } }) hwWidthEle.addEventListener(change, function (e) { if (hwStateEnable) { ctx.lineWidth hwWidthEle.value; } }); hwLineCapEle.addEventListener(change, function (e) { if (hwStateEnable) { ctx.lineCap hwLineCapEle.value; } }); hwLineJoinEle.addEventListener(change, function (e) { if (hwStateEnable) { ctx.lineJoin hwLineJoinEle.value; } }); hwStateEle.addEventListener(click, function (e) { hwStateEnable !hwStateEnable; if (hwStateEnable) { hwStateEle.innerHTML Enabled; canvas.addEventListener(mousedown, startDrawing); canvas.addEventListener(mousemove, draw); canvas.addEventListener(mouseup, stopDrawing); canvas.addEventListener(mouseout, stopDrawing); } else { hwStateEle.innerHTML Disabled; canvas.removeEventListener(mousedown, startDrawing); canvas.removeEventListener(mousemove, draw); canvas.removeEventListener(mouseup, stopDrawing); canvas.removeEventListener(mouseout, stopDrawing); } }) hwUndoEle.addEventListener(click, function () { if (hwHistoryCurrentIndex -1) return; hwHistoryCurrentIndex hwHistoryCurrentIndex - 1; var imgData hwHistory[hwHistoryCurrentIndex]; canvas.width imgData.width; canvas.height imgData.height; ctx.putImageData(imgData, 0, 0); }); hwRedoEle.addEventListener(click, function () { if (hwHistoryCurrentIndex hwHistory.length - 1) return; hwHistoryCurrentIndex hwHistoryCurrentIndex 1; var imgData hwHistory[hwHistoryCurrentIndex]; canvas.width imgData.width; canvas.height imgData.height; ctx.putImageData(imgData, 0, 0); }); /script /htmlV1增加颜色修改画布大小增加alpha透明值增加透明橡皮擦颜色替换html head meta charsetutf-8 titlePic-Editor/title /head body h5 styletext-align:center;wurd/h5 div stylemargin:10px 0px; input idimg-file typefile / button onclickimgReset()Reset/button button idhandwriting-undoUndo/button button idhandwriting-redoRedo/button input idhandwriting-history-num stylewidth: 55px; titleMax History Store typenumber min1 max55 step1 value20 / labelCanvas WH: /label labelLeft:/labelinput idhandwriting-canvas-left typenumber min0 / labelTop:/labelinput idhandwriting-canvas-top typenumber min0 / labelRight:/labelinput idhandwriting-canvas-right typenumber min0 / labelBottom:/labelinput idhandwriting-canvas-bottom typenumber min0 / button idhandwriting-canvas-wh-clearClear/button button idhandwriting-canvas-wh-okOk/button /div div stylemargin:10px 0px; div styledisplay: inline-block; labelCut: /label labelleft-top/label input idcut-lt1 typenumber stylewidth:77px; / input idcut-lt2 typenumber stylewidth:77px; / labelwidth/label input idcut-width typenumber stylewidth:77px; / labelheight/label input idcut-height typenumber stylewidth:77px; / button onclickimgCut()Cut/button /div div styledisplay: inline-block;font-size: 15px;font-weight: bold;| /div div styledisplay: inline-block; labelMagic Color Change: /label input idmagiccc-color1 typecolor / input idmagiccc-color1-diff titlecolor aberration typenumber step1 value0 min0 max255 / input idmagiccc-color2 typecolor / labelAlpha/label input idmagiccc-alpha typenumber step0.1 value1 min0 max1 / button onclickmagiccc()Ok/button /div /div div stylemargin:10px 0px; labelHandWriting: /label labelColor/label input idhandwriting-color typecolor / labelAlpha/label input idhandwriting-alpha typenumber step0.1 value1 min0 max1 / labelWidth/label input idhandwriting-width typenumber step0.1 value2 stylewidth:77px; labelLineCap/label select idhandwriting-lineCap defaultround option valueroundRound/option option valuebuttButt/option option valuesquareSquare/option /select labelLineJoin/label select idhandwriting-lineJoin defaultround option valueroundRound/option option valuemiterMiter/option option valuebevelBevel/option /select labelErase/label input idhandwriting-erase typecheckbox button idhandwriting-stateDisabled/button /div div stylemargin:10px 0px; canvas idcanvas width0 height0 stylebox-shadow: 3px 3px 11px #BFBFBF;/canvas /div /body script var hwColorEle document.getElementById(handwriting-color); var hwAlphaEle document.getElementById(handwriting-alpha); var hwWidthEle document.getElementById(handwriting-width); var hwLineCapEle document.getElementById(handwriting-lineCap); var hwLineJoinEle document.getElementById(handwriting-lineJoin); var hwEraseEle document.getElementById(handwriting-erase); var hwStateEle document.getElementById(handwriting-state); var hwUndoEle document.getElementById(handwriting-undo); var hwRedoEle document.getElementById(handwriting-redo); var hwCanvasWHClearEle document.getElementById(handwriting-canvas-wh-clear); var hwCanvasWHOkEle document.getElementById(handwriting-canvas-wh-ok); var hwHistoryNumEle document.getElementById(handwriting-history-num); hwHistoryNumEle.disabled false; var imgEle document.getElementById(img-file); var img new Image(); var canvas document.getElementById(canvas); var ctx canvas.getContext(2d); var isErase hwEraseEle.checked; var hwHistory []; var hwHistoryCurrentIndex -1; var hwHistoryMaxIndex hwHistoryNumEle.value; function hwHistroyIndexAdd(addNum) { if (hwHistoryCurrentIndex (hwHistoryMaxIndex - 2) addNum 0) { hwHistory.shift(); } else { hwHistoryCurrentIndex hwHistoryCurrentIndex addNum; } if (hwHistoryCurrentIndex -1) hwHistoryCurrentIndex -1; return hwHistoryCurrentIndex; } /script script function setCanvasTitle(title) { if (title) { canvas.title title; } } function imgReset() { canvas.width img.width; canvas.height img.height; ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.drawImage(img, 0, 0); var imgData ctx.getImageData(0, 0, canvas.width, canvas.height); hwHistoryCurrentIndex -1; hwHistory[hwHistoryCurrentIndex] imgData; } function imgCut() { console.log(cut); var lt1 document.getElementById(cut-lt1).value; var lt2 document.getElementById(cut-lt2).value; var width document.getElementById(cut-width).value; var height document.getElementById(cut-height).value; lt1 lt1 ? lt1 : 0; lt2 lt2 ? lt2 : 0; width width ? width : 0; height height ? height : 0; lt1 lt1 0 ? 0 : lt1; lt2 lt2 0 ? 0 : lt2; width width 0 ? canvas.width - lt1 : width; height height 0 ? canvas.height - lt2 : height; width width canvas.width ? canvas.width : width; height height canvas.height ? canvas.height : height; var newImg new Image(); newImg.onload function () { canvas.width width; canvas.height height; setCanvasTitle(width , height); ctx.clearRect(0, 0, width, height); ctx.drawImage(newImg, lt1, lt2, width, height, 0, 0, width, height); var imgData ctx.getImageData(0, 0, canvas.width, canvas.height); hwHistoryCurrentIndex hwHistroyIndexAdd(1); hwHistory[hwHistoryCurrentIndex] imgData; }; newImg.src canvas.toDataURL(); } function magiccc() { console.log(magic); var c1 document.getElementById(magiccc-color1).value; var c1Diff document.getElementById(magiccc-color1-diff).value; c1Diff parseInt(c1Diff) || 0; var c2 document.getElementById(magiccc-color2).value; var alpha document.getElementById(magiccc-alpha).value; var imgData ctx.getImageData(0, 0, canvas.width, canvas.height); var c1RGB hexToRGB(c1); var c2RGB hexToRGB(c2); for (var i 0; i imgData.data.length - 3; (i i 4)) { if (Math.abs(imgData.data[i] - c1RGB[0]) c1Diff Math.abs(imgData.data[i 1] - c1RGB[1]) c1Diff Math.abs(imgData.data[i 2] - c1RGB[2]) c1Diff) { imgData.data[i] c2RGB[0]; imgData.data[i 1] c2RGB[1]; imgData.data[i 2] c2RGB[2]; alpha (imgData.data[i 3] parseFloat(alpha) * 255); } } ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.putImageData(imgData, 0, 0); hwHistoryCurrentIndex hwHistroyIndexAdd(1); hwHistory[hwHistoryCurrentIndex] imgData; } function hexToRGB(hex) { var r 0; var g 0; var b 0; if (hex.length 4) { r parseInt(hex[1] hex[1], 16); g parseInt(hex[2] hex[2], 16); b parseInt(hex[3] hex[3], 16); } else if (hex.length 7) { r parseInt(hex[1] hex[2], 16); g parseInt(hex[3] hex[4], 16); b parseInt(hex[5] hex[6], 16); } return [r, g, b]; } /script script var hwStateEnable false; var isDrawing false; var lastX 0; var lastY 0; function startDrawing(e) { if (!hwStateEnable) return; isDrawing true; isErase hwEraseEle.checked; if (isErase) { ctx.globalCompositeOperation destination-out; } else { ctx.globalCompositeOperation source-over; } ctx.lineWidth hwWidthEle.value; ctx.lineCap hwLineCapEle.value; ctx.lineJoin hwLineJoinEle.value; ctx.strokeStyle hwColorEle.value; ctx.globalAlpha hwAlphaEle.value;[lastX, lastY] getPosition(e); } function draw(e) { if (!isDrawing) return; ctx.beginPath(); ctx.moveTo(lastX, lastY);[currentX, currentY] getPosition(e); ctx.lineTo(currentX, currentY); ctx.stroke();[lastX, lastY] [currentX, currentY]; } function stopDrawing() { if (isDrawing) { var imgData ctx.getImageData(0, 0, canvas.width, canvas.height); hwHistoryCurrentIndex hwHistroyIndexAdd(1); hwHistory[hwHistoryCurrentIndex] imgData; } isDrawing false; } function getPosition(e) { var rect canvas.getBoundingClientRect(); if (e.type.indexOf(touch) ! -1) { var touch e.touches[0] || e.changedTouches[0]; return [touch.clientX - rect.left, touch.clientY - rect.top]; } return [e.clientX - rect.left, e.clientY - rect.top]; } /script script imgEle.addEventListener(change, function (e) { var file e.target.files[0]; if (!file) { return; } var imgReader new FileReader(); imgReader.onload function (event) { img.onload function () { imgReset(); setCanvasTitle(img.width , img.height); hwHistoryNumEle.disabled true; }; img.src event.target.result; }; imgReader.readAsDataURL(file); }); hwHistoryNumEle.addEventListener(change, function (e) { if (hwHistoryNumEle.value 1 || hwHistoryNumEle.value 55) { hwHistoryNumEle.value 20; } hwHistoryMaxIndex hwHistoryNumEle.value; }); hwCanvasWHClearEle.addEventListener(click, function (e) { document.getElementById(handwriting-canvas-left).value null; document.getElementById(handwriting-canvas-top).value null; document.getElementById(handwriting-canvas-right).value null; document.getElementById(handwriting-canvas-bottom).value null; }); hwCanvasWHOkEle.addEventListener(click, function (e) { var left document.getElementById(handwriting-canvas-left).value; left left ? left : 0; var top document.getElementById(handwriting-canvas-top).value; top top ? top : 0; var right document.getElementById(handwriting-canvas-right).value; right right ? right : 0; var bottom document.getElementById(handwriting-canvas-bottom).value; bottom bottom ? bottom : 0; var imgData null; if (canvas.width 0) { var imgData ctx.getImageData(0, 0, canvas.width, canvas.height); } canvas.width Number(left) canvas.width Number(right); canvas.height Number(top) canvas.height Number(bottom); if (imgData) { ctx.putImageData(imgData, left, top); } setCanvasTitle(canvas.width , canvas.height); hwHistoryCurrentIndex hwHistroyIndexAdd(1); hwHistory[hwHistoryCurrentIndex] ctx.getImageData(0, 0, canvas.width, canvas.height); }); hwStateEle.addEventListener(click, function (e) { hwStateEnable !hwStateEnable; if (hwStateEnable) { hwStateEle.innerHTML Enabled; canvas.addEventListener(mousedown, startDrawing); canvas.addEventListener(mousemove, draw); canvas.addEventListener(mouseup, stopDrawing); canvas.addEventListener(mouseout, stopDrawing); } else { hwStateEle.innerHTML Disabled; canvas.removeEventListener(mousedown, startDrawing); canvas.removeEventListener(mousemove, draw); canvas.removeEventListener(mouseup, stopDrawing); canvas.removeEventListener(mouseout, stopDrawing); } }); hwUndoEle.addEventListener(click, function () { if (hwHistoryCurrentIndex -1) return; hwHistoryCurrentIndex hwHistroyIndexAdd(-1); var imgData hwHistory[hwHistoryCurrentIndex]; canvas.width imgData.width; canvas.height imgData.height; ctx.putImageData(imgData, 0, 0); }); hwRedoEle.addEventListener(click, function () { if (hwHistoryCurrentIndex hwHistory.length - 1) return; hwHistoryCurrentIndex hwHistroyIndexAdd(1); var imgData hwHistory[hwHistoryCurrentIndex]; canvas.width imgData.width; canvas.height imgData.height; ctx.putImageData(imgData, 0, 0); }); /script /html 原生js canvas画布 图片剪切 手写 工具
第一版html head meta charsetutf-8 titlePic-Editor/title /head body h5 styletext-align:center;wurd/h5 div stylemargin:10px 0px; input idimg-file typefile / button onclickimgReset()Reset/button button idhandwriting-undoUndo/button button idhandwriting-redoRedo/button /div div stylemargin:10px 0px; div labelCut: /label labelleft-top/label input idcut-lt1 typenumber stylewidth:77px; / input idcut-lt2 typenumber stylewidth:77px; / labelwidth/label input idcut-width typenumber stylewidth:77px; / labelheight/label input idcut-height typenumber stylewidth:77px; / button onclickimgCut()Cut/button /div /div div stylemargin:10px 0px; labelHandWriting: /label labelColor/label select idhandwriting-color default#000 option value#000Black/option option value#fffWhite/option /select labelWidth/label input idhandwriting-width typenumber step0.1 value2 stylewidth:77px; labelLineCap/label select idhandwriting-lineCap defaultround option valueroundRound/option option valuebuttButt/option option valuesquareSquare/option /select labelLineJoin/label select idhandwriting-lineJoin defaultround option valueroundRound/option option valuemiterMiter/option option valuebevelBevel/option /select button idhandwriting-stateDisabled/button /div div stylemargin:10px 0px; canvas idcanvas width0 height0/canvas /div /body script var imgEle document.getElementById(img-file); var img new Image(); var canvas document.getElementById(canvas); var ctx canvas.getContext(2d); var hwHistory []; var hwHistoryCurrentIndex -1; /script script function setCanvasTitle(title) { if (title) { canvas.title title; } } function imgReset() { canvas.width img.width; canvas.height img.height; ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.drawImage(img, 0, 0); var imgData ctx.getImageData(0, 0, canvas.width, canvas.height); hwHistoryCurrentIndex -1; hwHistory[hwHistoryCurrentIndex] imgData; } function imgCut() { console.log(cut); var lt1 document.getElementById(cut-lt1).value; var lt2 document.getElementById(cut-lt2).value; var width document.getElementById(cut-width).value; var height document.getElementById(cut-height).value; lt1 lt1 ? lt1 : 0; lt2 lt2 ? lt2 : 0; width width ? width : 0; height height ? height : 0; lt1 lt1 0 ? 0 : lt1; lt2 lt2 0 ? 0 : lt2; width width 0 ? canvas.width - lt1 : width; height height 0 ? canvas.height - lt2 : height; width width canvas.width ? canvas.width : width; height height canvas.height ? canvas.height : height; var newImg new Image(); newImg.onload function () { canvas.width width; canvas.height height; setCanvasTitle(width , height); ctx.clearRect(0, 0, width, height); ctx.drawImage(newImg, lt1, lt2, width, height, 0, 0, width, height); var imgData ctx.getImageData(0, 0, canvas.width, canvas.height); hwHistoryCurrentIndex hwHistoryCurrentIndex 1; hwHistory[hwHistoryCurrentIndex] imgData; }; newImg.src canvas.toDataURL(); } /script script var hwStateEnable false; var isDrawing false; var lastX 0; var lastY 0; function startDrawing(e) { if (!hwStateEnable) return; isDrawing true;[lastX, lastY] getPosition(e); } function draw(e) { if (!isDrawing) return; ctx.beginPath(); ctx.moveTo(lastX, lastY);[currentX, currentY] getPosition(e); ctx.lineTo(currentX, currentY); ctx.stroke();[lastX, lastY] [currentX, currentY]; } function stopDrawing() { if (isDrawing) { var imgData ctx.getImageData(0, 0, canvas.width, canvas.height); hwHistoryCurrentIndex hwHistoryCurrentIndex 1; hwHistory[hwHistoryCurrentIndex] imgData; } isDrawing false; } function getPosition(e) { var rect canvas.getBoundingClientRect(); if (e.type.indexOf(touch) ! -1) { var touch e.touches[0] || e.changedTouches[0]; return [touch.clientX - rect.left, touch.clientY - rect.top]; } return [e.clientX - rect.left, e.clientY - rect.top]; } /script script var hwColorEle document.getElementById(handwriting-color); var hwWidthEle document.getElementById(handwriting-width); var hwLineCapEle document.getElementById(handwriting-lineCap); var hwLineJoinEle document.getElementById(handwriting-lineJoin); var hwStateEle document.getElementById(handwriting-state); var hwUndoEle document.getElementById(handwriting-undo); var hwRedoEle document.getElementById(handwriting-redo); imgEle.addEventListener(change, function (e) { var file e.target.files[0]; if (!file) { return; } var imgReader new FileReader(); imgReader.onload function (event) { img.onload function () { imgReset(); imgEle.title img.width , img.height; }; img.src event.target.result; }; imgReader.readAsDataURL(file); }); ctx.stokeStyle hwColorEle.value; ctx.lineWidth hwWidthEle.value; ctx.lineCap hwLineCapEle.value; ctx.lineJoin hwLineJoinEle.value; hwColorEle.addEventListener(change, function (e) { if (hwStateEnable) { ctx.strokeStyle hwColorEle.value; } }) hwWidthEle.addEventListener(change, function (e) { if (hwStateEnable) { ctx.lineWidth hwWidthEle.value; } }); hwLineCapEle.addEventListener(change, function (e) { if (hwStateEnable) { ctx.lineCap hwLineCapEle.value; } }); hwLineJoinEle.addEventListener(change, function (e) { if (hwStateEnable) { ctx.lineJoin hwLineJoinEle.value; } }); hwStateEle.addEventListener(click, function (e) { hwStateEnable !hwStateEnable; if (hwStateEnable) { hwStateEle.innerHTML Enabled; canvas.addEventListener(mousedown, startDrawing); canvas.addEventListener(mousemove, draw); canvas.addEventListener(mouseup, stopDrawing); canvas.addEventListener(mouseout, stopDrawing); } else { hwStateEle.innerHTML Disabled; canvas.removeEventListener(mousedown, startDrawing); canvas.removeEventListener(mousemove, draw); canvas.removeEventListener(mouseup, stopDrawing); canvas.removeEventListener(mouseout, stopDrawing); } }) hwUndoEle.addEventListener(click, function () { if (hwHistoryCurrentIndex -1) return; hwHistoryCurrentIndex hwHistoryCurrentIndex - 1; var imgData hwHistory[hwHistoryCurrentIndex]; canvas.width imgData.width; canvas.height imgData.height; ctx.putImageData(imgData, 0, 0); }); hwRedoEle.addEventListener(click, function () { if (hwHistoryCurrentIndex hwHistory.length - 1) return; hwHistoryCurrentIndex hwHistoryCurrentIndex 1; var imgData hwHistory[hwHistoryCurrentIndex]; canvas.width imgData.width; canvas.height imgData.height; ctx.putImageData(imgData, 0, 0); }); /script /htmlV1增加颜色修改画布大小增加alpha透明值增加透明橡皮擦颜色替换html head meta charsetutf-8 titlePic-Editor/title /head body h5 styletext-align:center;wurd/h5 div stylemargin:10px 0px; input idimg-file typefile / button onclickimgReset()Reset/button button idhandwriting-undoUndo/button button idhandwriting-redoRedo/button input idhandwriting-history-num stylewidth: 55px; titleMax History Store typenumber min1 max55 step1 value20 / labelCanvas WH: /label labelLeft:/labelinput idhandwriting-canvas-left typenumber min0 / labelTop:/labelinput idhandwriting-canvas-top typenumber min0 / labelRight:/labelinput idhandwriting-canvas-right typenumber min0 / labelBottom:/labelinput idhandwriting-canvas-bottom typenumber min0 / button idhandwriting-canvas-wh-clearClear/button button idhandwriting-canvas-wh-okOk/button /div div stylemargin:10px 0px; div styledisplay: inline-block; labelCut: /label labelleft-top/label input idcut-lt1 typenumber stylewidth:77px; / input idcut-lt2 typenumber stylewidth:77px; / labelwidth/label input idcut-width typenumber stylewidth:77px; / labelheight/label input idcut-height typenumber stylewidth:77px; / button onclickimgCut()Cut/button /div div styledisplay: inline-block;font-size: 15px;font-weight: bold;| /div div styledisplay: inline-block; labelMagic Color Change: /label input idmagiccc-color1 typecolor / input idmagiccc-color1-diff titlecolor aberration typenumber step1 value0 min0 max255 / input idmagiccc-color2 typecolor / labelAlpha/label input idmagiccc-alpha typenumber step0.1 value1 min0 max1 / button onclickmagiccc()Ok/button /div /div div stylemargin:10px 0px; labelHandWriting: /label labelColor/label input idhandwriting-color typecolor / labelAlpha/label input idhandwriting-alpha typenumber step0.1 value1 min0 max1 / labelWidth/label input idhandwriting-width typenumber step0.1 value2 stylewidth:77px; labelLineCap/label select idhandwriting-lineCap defaultround option valueroundRound/option option valuebuttButt/option option valuesquareSquare/option /select labelLineJoin/label select idhandwriting-lineJoin defaultround option valueroundRound/option option valuemiterMiter/option option valuebevelBevel/option /select labelErase/label input idhandwriting-erase typecheckbox button idhandwriting-stateDisabled/button /div div stylemargin:10px 0px; canvas idcanvas width0 height0 stylebox-shadow: 3px 3px 11px #BFBFBF;/canvas /div /body script var hwColorEle document.getElementById(handwriting-color); var hwAlphaEle document.getElementById(handwriting-alpha); var hwWidthEle document.getElementById(handwriting-width); var hwLineCapEle document.getElementById(handwriting-lineCap); var hwLineJoinEle document.getElementById(handwriting-lineJoin); var hwEraseEle document.getElementById(handwriting-erase); var hwStateEle document.getElementById(handwriting-state); var hwUndoEle document.getElementById(handwriting-undo); var hwRedoEle document.getElementById(handwriting-redo); var hwCanvasWHClearEle document.getElementById(handwriting-canvas-wh-clear); var hwCanvasWHOkEle document.getElementById(handwriting-canvas-wh-ok); var hwHistoryNumEle document.getElementById(handwriting-history-num); hwHistoryNumEle.disabled false; var imgEle document.getElementById(img-file); var img new Image(); var canvas document.getElementById(canvas); var ctx canvas.getContext(2d); var isErase hwEraseEle.checked; var hwHistory []; var hwHistoryCurrentIndex -1; var hwHistoryMaxIndex hwHistoryNumEle.value; function hwHistroyIndexAdd(addNum) { if (hwHistoryCurrentIndex (hwHistoryMaxIndex - 2) addNum 0) { hwHistory.shift(); } else { hwHistoryCurrentIndex hwHistoryCurrentIndex addNum; } if (hwHistoryCurrentIndex -1) hwHistoryCurrentIndex -1; return hwHistoryCurrentIndex; } /script script function setCanvasTitle(title) { if (title) { canvas.title title; } } function imgReset() { canvas.width img.width; canvas.height img.height; ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.drawImage(img, 0, 0); var imgData ctx.getImageData(0, 0, canvas.width, canvas.height); hwHistoryCurrentIndex -1; hwHistory[hwHistoryCurrentIndex] imgData; } function imgCut() { console.log(cut); var lt1 document.getElementById(cut-lt1).value; var lt2 document.getElementById(cut-lt2).value; var width document.getElementById(cut-width).value; var height document.getElementById(cut-height).value; lt1 lt1 ? lt1 : 0; lt2 lt2 ? lt2 : 0; width width ? width : 0; height height ? height : 0; lt1 lt1 0 ? 0 : lt1; lt2 lt2 0 ? 0 : lt2; width width 0 ? canvas.width - lt1 : width; height height 0 ? canvas.height - lt2 : height; width width canvas.width ? canvas.width : width; height height canvas.height ? canvas.height : height; var newImg new Image(); newImg.onload function () { canvas.width width; canvas.height height; setCanvasTitle(width , height); ctx.clearRect(0, 0, width, height); ctx.drawImage(newImg, lt1, lt2, width, height, 0, 0, width, height); var imgData ctx.getImageData(0, 0, canvas.width, canvas.height); hwHistoryCurrentIndex hwHistroyIndexAdd(1); hwHistory[hwHistoryCurrentIndex] imgData; }; newImg.src canvas.toDataURL(); } function magiccc() { console.log(magic); var c1 document.getElementById(magiccc-color1).value; var c1Diff document.getElementById(magiccc-color1-diff).value; c1Diff parseInt(c1Diff) || 0; var c2 document.getElementById(magiccc-color2).value; var alpha document.getElementById(magiccc-alpha).value; var imgData ctx.getImageData(0, 0, canvas.width, canvas.height); var c1RGB hexToRGB(c1); var c2RGB hexToRGB(c2); for (var i 0; i imgData.data.length - 3; (i i 4)) { if (Math.abs(imgData.data[i] - c1RGB[0]) c1Diff Math.abs(imgData.data[i 1] - c1RGB[1]) c1Diff Math.abs(imgData.data[i 2] - c1RGB[2]) c1Diff) { imgData.data[i] c2RGB[0]; imgData.data[i 1] c2RGB[1]; imgData.data[i 2] c2RGB[2]; alpha (imgData.data[i 3] parseFloat(alpha) * 255); } } ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.putImageData(imgData, 0, 0); hwHistoryCurrentIndex hwHistroyIndexAdd(1); hwHistory[hwHistoryCurrentIndex] imgData; } function hexToRGB(hex) { var r 0; var g 0; var b 0; if (hex.length 4) { r parseInt(hex[1] hex[1], 16); g parseInt(hex[2] hex[2], 16); b parseInt(hex[3] hex[3], 16); } else if (hex.length 7) { r parseInt(hex[1] hex[2], 16); g parseInt(hex[3] hex[4], 16); b parseInt(hex[5] hex[6], 16); } return [r, g, b]; } /script script var hwStateEnable false; var isDrawing false; var lastX 0; var lastY 0; function startDrawing(e) { if (!hwStateEnable) return; isDrawing true; isErase hwEraseEle.checked; if (isErase) { ctx.globalCompositeOperation destination-out; } else { ctx.globalCompositeOperation source-over; } ctx.lineWidth hwWidthEle.value; ctx.lineCap hwLineCapEle.value; ctx.lineJoin hwLineJoinEle.value; ctx.strokeStyle hwColorEle.value; ctx.globalAlpha hwAlphaEle.value;[lastX, lastY] getPosition(e); } function draw(e) { if (!isDrawing) return; ctx.beginPath(); ctx.moveTo(lastX, lastY);[currentX, currentY] getPosition(e); ctx.lineTo(currentX, currentY); ctx.stroke();[lastX, lastY] [currentX, currentY]; } function stopDrawing() { if (isDrawing) { var imgData ctx.getImageData(0, 0, canvas.width, canvas.height); hwHistoryCurrentIndex hwHistroyIndexAdd(1); hwHistory[hwHistoryCurrentIndex] imgData; } isDrawing false; } function getPosition(e) { var rect canvas.getBoundingClientRect(); if (e.type.indexOf(touch) ! -1) { var touch e.touches[0] || e.changedTouches[0]; return [touch.clientX - rect.left, touch.clientY - rect.top]; } return [e.clientX - rect.left, e.clientY - rect.top]; } /script script imgEle.addEventListener(change, function (e) { var file e.target.files[0]; if (!file) { return; } var imgReader new FileReader(); imgReader.onload function (event) { img.onload function () { imgReset(); setCanvasTitle(img.width , img.height); hwHistoryNumEle.disabled true; }; img.src event.target.result; }; imgReader.readAsDataURL(file); }); hwHistoryNumEle.addEventListener(change, function (e) { if (hwHistoryNumEle.value 1 || hwHistoryNumEle.value 55) { hwHistoryNumEle.value 20; } hwHistoryMaxIndex hwHistoryNumEle.value; }); hwCanvasWHClearEle.addEventListener(click, function (e) { document.getElementById(handwriting-canvas-left).value null; document.getElementById(handwriting-canvas-top).value null; document.getElementById(handwriting-canvas-right).value null; document.getElementById(handwriting-canvas-bottom).value null; }); hwCanvasWHOkEle.addEventListener(click, function (e) { var left document.getElementById(handwriting-canvas-left).value; left left ? left : 0; var top document.getElementById(handwriting-canvas-top).value; top top ? top : 0; var right document.getElementById(handwriting-canvas-right).value; right right ? right : 0; var bottom document.getElementById(handwriting-canvas-bottom).value; bottom bottom ? bottom : 0; var imgData null; if (canvas.width 0) { var imgData ctx.getImageData(0, 0, canvas.width, canvas.height); } canvas.width Number(left) canvas.width Number(right); canvas.height Number(top) canvas.height Number(bottom); if (imgData) { ctx.putImageData(imgData, left, top); } setCanvasTitle(canvas.width , canvas.height); hwHistoryCurrentIndex hwHistroyIndexAdd(1); hwHistory[hwHistoryCurrentIndex] ctx.getImageData(0, 0, canvas.width, canvas.height); }); hwStateEle.addEventListener(click, function (e) { hwStateEnable !hwStateEnable; if (hwStateEnable) { hwStateEle.innerHTML Enabled; canvas.addEventListener(mousedown, startDrawing); canvas.addEventListener(mousemove, draw); canvas.addEventListener(mouseup, stopDrawing); canvas.addEventListener(mouseout, stopDrawing); } else { hwStateEle.innerHTML Disabled; canvas.removeEventListener(mousedown, startDrawing); canvas.removeEventListener(mousemove, draw); canvas.removeEventListener(mouseup, stopDrawing); canvas.removeEventListener(mouseout, stopDrawing); } }); hwUndoEle.addEventListener(click, function () { if (hwHistoryCurrentIndex -1) return; hwHistoryCurrentIndex hwHistroyIndexAdd(-1); var imgData hwHistory[hwHistoryCurrentIndex]; canvas.width imgData.width; canvas.height imgData.height; ctx.putImageData(imgData, 0, 0); }); hwRedoEle.addEventListener(click, function () { if (hwHistoryCurrentIndex hwHistory.length - 1) return; hwHistoryCurrentIndex hwHistroyIndexAdd(1); var imgData hwHistory[hwHistoryCurrentIndex]; canvas.width imgData.width; canvas.height imgData.height; ctx.putImageData(imgData, 0, 0); }); /script /html