canvas简易画图板（图形，文字），图片上传服务器

最新推荐文章于 2024-06-05 17:52:44 发布

jeb222222

最新推荐文章于 2024-06-05 17:52:44 发布

阅读量470

点赞数

文章标签： canvas 画板 js

本文链接：https://blog.csdn.net/jeb222222/article/details/81940086

版权

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="jquery.min.js"></script>
<style>
.selectType div {
float: left;
margin-left: 10px;
padding: 5px;
background-color: blue;
border-radius: 6px;
height: 30px;
text-align: center;
color: white;
}

#wordEnter {
/*width:0px;
height:0px;*/
/*display:none;*/
position: absolute;
resize: none;
overflow: hidden;
border: 1px dashed #808080;
}

#leave-message-textarea {
width: 100px;
min-height: 20px;
max-height: 10000px;
outline: 0;
border: 1px dashed #808080;
position: absolute;
font-size: 13px;
font-family: Arial;
overflow-x: hidden;
overflow-y: hidden;
-webkit-user-modify: read-write-plaintext-only;
}
</style>
<script type="text/javascript">

$(function () {
var canvas = document.querySelector("canvas");
var ctx = canvas.getContext("2d");//画布
var arr = [];
var img = new Image();//载入的图像
img.src = "1.jpg";
img.onload = function () {
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);
arr.push(ctx.getImageData(0, 0, canvas.width, canvas.height));//数组保存画好的图像
}
var startX, startY, w, h;//起始坐标和结束坐标
var textTop = 0;//文字使用(起始位置）
var textLeft = 0;//文字使用(起始位置）
var type = "line";//线的类型
var color = "#000";//颜色
var lineWidth = 1;//线宽
//选取颜色
document.querySelector("input[type='color']").onchange = function () {
color = this.value;
}
//选取现款
document.querySelector("input[type='number']").onchange = function () {
lineWidth = this.value;
}
//选取画的图案
$(".drawType").each(function (index, ele) {
$(ele).click(function () {
type = $(this).attr("data");
});
})
canvas.onmousedown = function (e) {
startX = e.offsetX;
startY = e.offsetY;
ctx.strokeStyle = color;
ctx.lineWidth = lineWidth;
if (type == "pen") {
ctx.beginPath();
ctx.moveTo(startX, startY);
}
if (type == "word") {
w = startX;
h = startY;
ctx.save();
ctx.setLineDash([15, 10]);
ctx.lineWidth = 1;
ctx.strokeStyle = "#000";

}
canvas.onmousemove = function (e) {
w = e.offsetX;
h = e.offsetY;
if (type == "eraser") {
ctx.lineCap = "round";
ctx.clearRect(w - 5, h - 5, 10, 10);
}
else {
ctx.clearRect(0, 0, canvas.width, canvas.height);
if (arr.length > 0) {
ctx.putImageData(arr[arr.length - 1], 0, 0, 0, 0, canvas.width, canvas.height);
}
draw(ctx, startX, startY, w, h, type);
}
}
document.onmouseup = function (e) {
ctx.restore();
canvas.onmousemove = null;
document.onmouseup = null;
if (type == "word") {//画好后，替换为输入框
ctx.putImageData(arr[arr.length - 1], 0, 0, 0, 0, canvas.width, canvas.height);
textTop = startY+13;
textLeft = startX;
var canvasLeft = canvas.offsetLeft;
var canvasTop = canvas.offsetTop;
var txtTop = canvasTop + (h - startY > 0 ? startY : h) + "px";
var txtLeft = canvasLeft + (w - startX > 0 ? startX : w) + "px";
var txtHeight = Math.abs(h - startY) + "px";
var txtWidth = Math.abs(w - startX) + "px";
$("#leave-message-textarea").css("top", txtTop).css("left", txtLeft)
.css("min-height", txtHeight).css("width", txtWidth).css("display", "block").css("color",color).focus();
}
else {
arr.push(ctx.getImageData(0, 0, canvas.width, canvas.height));
}
}
}
document.getElementById("reset").onclick = function () {
if (arr.length > 1) {
arr.pop();
}
ctx.clearRect(0, 0, canvas.width, canvas.height);
if (arr.length > 0) {
ctx.putImageData(arr[arr.length - 1], 0, 0, 0, 0, canvas.width, canvas.height);
}
}
document.getElementById("clear").onclick = function () {
arr.splice(1, arr.length - 1);
ctx.clearRect(0, 0, canvas.width, canvas.height);
if (arr.length > 0) {
ctx.putImageData(arr[arr.length - 1], 0, 0, 0, 0, canvas.width, canvas.height);
}
}
//失去焦点后，隐藏输入框，输入的文字绘制到画布
$("#leave-message-textarea").blur(function () {
var str = $("#leave-message-textarea").text().replace(/\n/g, "`");
if (str.length > 0) {
ctx.font = "13px Arial";
ctx.fillStyle = color;
var textarea = document.getElementById("leave-message-textarea");
var rectWidth = $("#leave-message-textarea").css("width");
var left = textLeft;
var rectWith = parseFloat(rectWidth);
var lineWidth = 0;
var txtHeight = 3;
var reg = /^[0-9a-zA-Z]+$/;
for (var i = 0; i < str.length; i++) {
var sWidth = ctx.measureText(str[i]).width;
lineWidth += sWidth;
if (lineWidth < rectWith && str[i] != "`") {
ctx.fillText(str[i], left, textTop);
left += sWidth;
}
else {
if (str[i] != "`") {
i--;
}
lineWidth = 0;
left = textLeft;
textTop += 15;
}
}
arr.push(ctx.getImageData(0, 0, canvas.width, canvas.height));
}
$("#leave-message-textarea").css("display", "none");
$("#leave-message-textarea").text("");
})

})
//绘制图形
function draw(ctx, startX, startY, w, h, type) {
switch (type) {
case "pen":
ctx.lineTo(w, h);
break;
case "line":
ctx.beginPath();
ctx.moveTo(startX, startY);
ctx.lineTo(w, h);
break;
case "circle":
ctx.beginPath();
var r = Math.sqrt(Math.pow(w - startX, 2) + Math.pow(h - startY, 2));
ctx.arc(startX, startY, r, 200, 100, true);
break;
case "rect":
ctx.beginPath();
ctx.strokeRect(startX, startY, w - startX, h - startY);
break;
case "rt":
ctx.beginPath();
ctx.moveTo(startX, startY);
ctx.lineTo(startX - (1 / Math.sqrt(3) * (h - startY)), h);
ctx.lineTo(startX + (1 / Math.sqrt(3) * (h - startY)), h);
ctx.closePath();
break;
case "word":
ctx.beginPath();
ctx.strokeRect(startX, startY, w - startX, h - startY);
break;
}
ctx.stroke();
}
//输入超出画布，取消输入，绘制到画布
function canEnter() {
var txtHeight = $("#leave-message-textarea").css("height");
var canvas = document.querySelector("canvas");
var canvasHeight = $(canvas).css("height");
var canvasTop = $(canvas).offset().top;
var canvasBottom = canvasTop + parseFloat(canvasHeight);
var txtTop = $("#leave-message-textarea").offset().top;
var txtBottom = parseFloat(txtHeight) + txtTop;
if (txtBottom > canvasBottom) {
$("#leave-message-textarea").blur();
}
}

.net 保存只要部分

var data = context.Request.Params["data"];
var path=context.Server.MapPath("~/temp/11.jpg");
byte[] bt = Convert.FromBase64String(data);
File.WriteAllBytes(path, bt);

jeb222222

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
canvas简易画图板（图形，文字），图片上传服务器

&lt;!DOCTYPE html&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;title&gt;&amp
复制链接

扫一扫