Question

我想创建一个程序，允许客户端从他的电脑上传图像并在其上添加一些细节并再次下载。

但我遇到了安全问题（污染的画布可能无法导出）。

所以我想在用户编辑之后将crossorigin="anonymous" - attr添加到由canvas创建的新图像中。我不知道应该把这个属性放在哪里。

这是我的代码：

 <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script 
    src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
    </script>
    <script 
    src="https://files.codepedia.info/files/uploads/iScripts/html2canvas.js">
    </script>
    </head>
    <body>
    <div style="background-color: #F0F0F1; color: #00cc65; width: 500px; 
    padding-left: 25px; padding-top: 10px">
          <strong>Welcome <br>Mr/Mohamed Abdallah</strong><hr/>
        <h3 style="color: #3e4b51;">
     Enter Your details here :        </h3>
        <form>
        Price before sale :<br>
        <input type="number" placeholder="before sale" id="befors"><br>
                <hr>

        Price after sale :<br>
        <input type="number" placeholder="after sale" id="afters"><br>
                        <hr>
        Product details : <br>
        <input type="text" placeholder="details" id="detailss"><br>

        </form> 
    </div>

    <form id="form1" runat="server">
        <input type='file' id="imgInp" style="position:absolute" />
        <input type="button" id="update" style="position:absolute;
        left:100px;width:80px" value="Update">
    <div id="html-content-holder" style="width:500px;height:500px;border:1px solid black;background-image: url('background.jpg')">

   <img id="blah" src="#" style="width:400px;height:400px;margin:50;
   position:absolute" />
    <div id="text" style="width:200px;height:120px;
    background:#FFF;border:1px solid black;position:absolute;border-
   radius:10px;margin-left:280px;margin-top:60px">

         <p style="margin-left:160px;margin-right:5px;;margin-
        top:8px;position:absolute">Now</p>

         <p id="price1" style="margin-left:75px;margin-right:5px;;margin-
      top:8px;position:absolute">Price</p>

        <p style="margin-left:160px;margin-right:5px;margin 
      top:50px;position:absolute">Was</p>

         <p id="price2" style="margin-left:75px;margin-right:5px;;margin-
     top:50px;position:absolute">Price</p>

        <p style="margin-left:5px;margin-right:5px;;margin-
     top:8px;position:absolute">%</p>

        <p style="margin-left:5px;margin-right:5px;margin-
    top:50px;position:absolute">%</p>

        <hr style="width:150px;margin-top:40px;postition:absolute">
        <hr style="width:150px;margin-top:40px;postition:absolute">

        <p id="details" style="margin-top:2px;margin-left:5px">  </p>

</div>
    </div>
</form>
<input id="btn-Preview-Image" type="button" value="Preview"/>
    <a id="btn-Convert-Html2Image" href="#">Download</a> 
<div id="previewImage"> 
</div>   


<script>
$("#update").on('click',function(){
    var price11 = document.getElementById("befors").value;
    var price22 = document.getElementById("afters").value;
    document.getElementById("price1").innerHTML = price11;
    document.getElementById("price2").innerHTML = price22;
        })

function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                $('#blah').attr('src', e.target.result);
            }

            reader.readAsDataURL(input.files[0]);
        }
    }

    $("#imgInp").change(function(){
        readURL(this);
    });

$(document).ready(function(){

var element = $("#html-content-holder"); // global variable
var getCanvas; // global variable

    $("#btn-Preview-Image").on('click', function () {
         html2canvas(element, {
         onrendered: function (canvas) {
                $("#previewImage").append(canvas);
                getCanvas = canvas;
             }
         });
    });

$("#btn-Convert-Html2Image").on('click', function () {
    var imgageData = getCanvas.toDataURL("image/jpg");
    // Now browser starts downloading it instead of just showing it
    var newData = imgageData.replace(/^data:image\/png/, "data:application/octet-stream");
    $("#btn-Convert-Html2Image").attr("download", "your_pic_name.png").attr("href", newData);

    });

});



</script>
</body>
</html>

我在哪里可以使用crossorigin =＆＃34;匿名＆＃34;在我的代码中，以防止出现安全错误（可能无法导出受污染的画布）

0 个答案: