将图像 src 传递给 onclick答案

【问题标题】：passing image src to onclick将图像 src 传递给 onclick
【发布时间】：2018-01-25 20:04:48
【问题描述】：

我正在执行以下脚本，以便使用 Javascript 将图像转换为灰度。

<body>
<canvas id="myCanvas" width="578" height="400"></canvas>
<script>
  function drawImage(imageObj) {
    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');
    var x = 69;
    var y = 50;

    context.drawImage(imageObj, x, y);

    var imageData = context.getImageData(x, y, imageObj.width, imageObj.height);
    var data = imageData.data;

    for(var i = 0; i < data.length; i += 4) {
      var brightness = 0.34 * data[i] + 0.5 * data[i + 1] + 0.16 * data[i + 2];
      // red
      data[i] = brightness;
      // green
      data[i + 1] = brightness;
      // blue
      data[i + 2] = brightness;
    }

    // overwrite original image
    context.putImageData(imageData, x, y);

  }

  var imageObj = new Image();
  imageObj.onload = function() {
    drawImage(this);

  };
  imageObj.src = 'text.png';
</script>

每当我更改 imageObj.src 时，我的浏览器都会以灰度显示指示的图像。但是，我想要的是仅在单击某种按钮时显示转换后的图像。鉴于我的图片是在脚本开头上传的。

我试过了

<button onclick="drawimage(uploadedFile)">Here</button>

显然没有用。我还想在我的其余代码中使用新转换的图像（将其存储在某种变量中），但仍然想不出办法。谢谢你帮助我！

【问题讨论】：

标签： javascript html grayscale

【解决方案1】：

试试这个，这是现场版https://jsbin.com/relokugumo/1/edit?html,js,output

HTML 到

<canvas id="myCanvas" width="578" height="400"></canvas>
<button onclick="setImage('<?php echo $uploadefile ?>')">Here</button>

还有 JS 到，

function setImage(imagePath){
  var imageObj = new Image();
  imageObj.src = imagePath;
  drawImage(imageObj);
}

function drawImage(imageObj) {
    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');
    var x = 69;
    var y = 50;

    context.drawImage(imageObj, x, y);

    var imageData = context.getImageData(x, y, imageObj.width, imageObj.height);
    var data = imageData.data;

    for(var i = 0; i < data.length; i += 4) {
      var brightness = 0.34 * data[i] + 0.5 * data[i + 1] + 0.16 * data[i + 2];
      // red
      data[i] = brightness;
      // green
      data[i + 1] = brightness;
      // blue
      data[i + 2] = brightness;
    }

    // overwrite original image
    context.putImageData(imageData, x, y);

  }

【讨论】：

非常感谢。但是如何将 imageObje.src 设置为我的 php 图像变量（$uploadedfile）的路径？我可以将它设置为 imageObj.src = ( PS: $uploadedfile = $uploadPath . basename( $_FILES['myfile']['name']); 和 : $uploadPath = 'uploads/ ')
你可以将它传递给 setImage 方法。等我更新答案
@F.Lin 检查是否是您要找的答案

【解决方案2】：

onload() 不会触发，因为图像从未加载。你应该做一个ajax请求来加载图像并在回调中使用你的函数

【讨论】：

难道没有办法只使用 Javascript 来做到这一点吗？我还在探索这种语言，而且我没有使用 ajax 的经验！

【解决方案3】：

这是我使用的。希望这会有所帮助。

<html>
    <head>
        <title>Canvas</title>
    </head>
    <body>
        <input id="upload_file" type="file">
        <button id="convert_button" onclick="convert()">Convert</button>
        <a onclick="downloadimage(this)">Download image</a>
        
        <script>
            var upload_file_input = document.getElementById("upload_file");
            upload_file_input.addEventListener("change",upload);
            
            var bodyelem = document.getElementsByTagName("body")[0];
            var canvas = document.createElement("canvas");
            canvas.setAttribute("id","main_canvas");
            var context = canvas.getContext("2d");
            function upload(e)
            {
                var reader = new FileReader();
                reader.onload = function(event){
                    var img = new Image();
                    img.onload = function(){
                        canvas.width = img.width;
                        canvas.height = img.height;
                        context.drawImage(img,0,0);
                    }
                    img.src = event.target.result;
                }
                reader.readAsDataURL(e.target.files[0]);
                var canvaselem = document.getElementById("main_canvas");
                canvaselem && bodyelem.removeChild(canvaselem);
                bodyelem.appendChild(canvas);
            }
            function convert()
            {
                var imagedata = context.getImageData(0,0,canvas.width,canvas.height);
                var data = imagedata.data;
                for(var i = 0,n=data.length;i<n;i+=4)
                {
                    var average = data[i]*0.3 +data[i+1]*0.59 + data[i+2]*0.11;
                    data[i] = data [i+1] = data[i+2] = average;
                }
                
                context.putImageData(imagedata,0,0,0,0,imagedata.width,imagedata.height);
            }
            function downloadimage(elem)
            {
                var image = canvas.toDataURL();
                elem.href = image;
                var imagename = prompt("Name : ","");
                elem.download = imagename ? imagename : "image" + ".png";
            }
            
        </script>
    </body>
</html>

【讨论】：

非常感谢您的帮助。但是，如果我只想在我在 myscript 中上传的图像上使用您的“convert()”函数，该图像恰好是一个 php 变量 $uploadedfile 怎么办？
你在那个可变的图像数据或图像路径中有什么？
$uploadedfile = $uploadPath 。基本名称（$_FILES['myfile']['name']）； with : $uploadPath = 'uploads/'
对不起。我对php 没有任何想法。可能您可以将 php 变量值（图像数据）复制到 js 变量中。尝试将其传递给 covert 方法。从未尝试过php。 :(