将令人沮丧的简单画布绘制图像保存到本地 Web 文件夹

Saving a frustrating simple Canvas drawn image to a local web folder?

本文关键字：保存 图像 文件夹 Web 绘制 简单 布绘制 将令      更新时间：2023-09-26

我有一个画布，允许用户用画笔在上面画画。

.JS

var sketcher = null;
 var brush = null;

$(document).ready(function(e) {
localStorage.setItem("clickCount", 0);
var alpha = localStorage.getItem("alpha");
if(!alpha){
    alpha = 10;
}
alpha = (parseInt(alpha))/10;
console.log(alpha);
//Get Brush Opacity
var power = localStorage.getItem("power");
var expo = localStorage.getItem("expo");
power = parseInt(power);
expo = parseInt(expo);
var opacity = ((expo / 100)+ 1) * (power / 10) / 100;
console.log(opacity);
var standBy = localStorage.getItem("standBy");
var brushSize = localStorage.getItem("spotDiameter");
brush = new Image();
brush.src = 'assets/brush_spot_'+ brushSize + '.png';
// brush.src = 'assets/brush_spot_'+ brushSize +"_"+ alpha + '.png';
if(standBy == "false"){
    brush.onload = function(){
        sketcher = new Sketcher( "sketch", brush );
        var canvas = document.getElementById('sketch');
        var c =  canvas.getContext("2d");
        c.globalAlpha = opacity;
    }
}
$("#sketch").css("cursor", "url(assets/cursor_spot_"+ brushSize +"_"+ alpha +".ico) 12 12, auto");
var clickCount = 0;
$('#sketch').click(function(e){
    if(standBy == "true"){
        e.preventDefault();
    }
     else{
        clickCount++;
        localStorage.setItem("clickCount", clickCount);
        $("#clickCount").text(clickCount);
    }

});

.HTML

<canvas id="sketch" width="1024" />
<canvas id="draw"/>

我有两个依赖的js文件，它们在网页草图器之前加载.js和三角函数.js .

我需要做的是在画布上绘制的任何内容保存到本地存储或作为本地文件夹中的临时文件，每次加载画布时都可以调用。

看起来您的画笔图像会污染画布并阻止 toDataURL。

您必须：

  • 配置服务器以符合 CORS 的方式交付映像：http://docs.telerik.com/kendo-ui/howto/use-cors-with-all-modern-browsers

或

  • 将映像托管在服务器标头设置为允许跨域共享的云站点上

无论哪种情况，在客户端上，您还必须设置 crossOrigin 标志，避免让浏览器将画布设置为受污染：

brush.crossOrigin="anonymous";
brush.src="...";
相关文章：