将图片src传递给onclick
[英]passing image src to onclick
问题描述
我正在执行以下脚本，以便使用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>
看来这没用。 我还想在代码的其余部分中使用新的转换后的图像（将其存储在某种变量中），但仍然找不到解决方法。 谢谢您的帮助！
3 个解决方案
解决方案1
0 2018-01-25 11:12:58
onload（）不会触发，因为图像从未加载。 你应该做一个ajax请求来加载图像并在回调中使用你的函数
解决方案2
0 2018-01-25 11:20:20
这就是我用的。 希望这可以帮助。
<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>
解决方案3
0 已采纳 2018-01-25 11:30:38
试试这个，这是一个实时版本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 To
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);
}
图像切换图像 src 的 Onclick
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.