简体   繁体   中英

putImageData doesn't scale/fit the video/image in canvas (HTML5, CSS, JS)

I have an image and it doesn't recognize the new size when I do put size:

here is a fiddle I created to simulate what I'm doing: https://jsfiddle.net/lightblue/w7tq3yrc/7/

As you can see, I already set the width and height of both image and canvas yet it still doesn't "fit" the image to the given size and still follows the original image width and height.

ctx.putImageData(imgd, 20, 20);

How can I make it so it fits with the height and width?

And If you can recommend a good library (if this needs one) I'll gladly listen to that.

The image you are using is 48/48. In order to get a 20/20 image on the canvas you need to do ctx.drawImage(image, 0, 0,20,20);

Also when you get the image data you don't do this: ctx.getImageData(0, 0, 45, 45), . Since you get the image data from a 20/20 canvas you do ctx.getImageData(0, 0, 20, 20)

I hope it helps.

 var canvas = document.getElementById("canvas"), ctx = canvas.getContext("2d"), image = document.getElementById("testImage"); // Fill screen with red, green, and blue stripes. ctx.fillStyle = "red"; ctx.fillRect(0, 0, 20, 20); ctx.drawImage(image, 0, 0,20,20); var imgd = ctx.getImageData(0, 0, 20, 20), pix = imgd.data; for (var i = 0, n = pix.length; i < n; i += 4) { var r = pix[i], g = pix[i + 1], b = pix[i + 2], a = pix[i + 3]; if (r < 60) { pix[i + 2] = 20; } } ctx.putImageData(imgd, 20, 20); 
 canvas { width: 20px; height: 20px; } #testImage{ width: 20px; height: 20px; background-color: green; } 
 <h3>Original Image</h3> <img id="testImage" src='data:;base64, iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAALUklEQVR42s2ZeawdVR3Hf7PcO3O3d9977Xut7wEtry1gsYSSsrS0REA0ldAqm8aCRqrBjURCXMAGlBQNECP8A4kLfwAqIjRsSsQAKrVEJCGBGqq0BQpd3tLe5b27zL2z+P2dMzN37vaW8lwmOcs9M+fM9/P7/c6ZM3MVmu/jVS+GfBHSkJ/4OOSnUVqj1OfzdsoHHuHvroH8QlKUzSg3Ip2ApHW52kF6H+lZpCeRXgSQ9b8B2GmtQu+bUbsUqQcAkVGjdT9TIg2N00Vc+zuUP6Kz1Tf+OwAvTJ2E/Afoei16NyzdSXT0Dm3nm2DYMw/hmttoXfzAfwbg2RyLvRU9vo1uZmtvQ1NpeVKlE02Fhk2NUBVHwfHoKKI+jzKHsgipk6gXbK8DmFJFfhfS7fTRpDN/AE+OZ5H/CumTrdZdmdHpEwMxOr8/Rmkd4myiMgROIZVseU2+jt8ufjuyXkb9vYorwA7X3ChAUPs9+n2OLskWPjjAo4eW46qnUPtwNH5XpGP0jeVJOjOri9+6qlDFkVatudLCJaQyRBdsV4gvseUBUMNlRZxjJxy0XNo75ZCFPi1h9iayTXRp/97jB3j43RXId2HghUGTrin0tRUZ2jqSRLPsjiaRpnzRbNQiRJd9b0xy3fFEKsLqNc8TAMzLQDmkd3HxRM1rUaZMIFtHnx58a+4AD+zjsHlZWN4X2m9odMsZvXT2QoP6DJV6YirB8MThLsW5ZDlcD0pPeGUS7YiYsJ4DIQdOAYIdkl7Jo+1w1aUxeMT1vOhC8CaKtXT1cGH2APfv0XDmaZzeGFzF4u86b4BWZGMQrwnxS9J62OVwxaEKrFoRYeMSjA6PuFT1Idg7VU6oH6k6VHcZmMW70hMAyKM+Dggei8Eic42fG5fRNUuc2QHcu3s7znwv+JmOa3TT6gV0ap9BGQjviavUh5WmF+3CA0iheIjm2OZ5YDks2BVhJesIMbZ23aEiW9/zIVh8mKQhJlD3vCaVd9B1y7bNDHD3a0uR78EZIzi9ddUCWj2YoP6ERhmIZoCFCR1xrwjxmu/uCsSzcLao7QPw5GQoUXckZB7xxeHGwos1V4DkLTcEyVm2CD9ui8wHC+VpdP2p70wPcMcrD6N5S3Bm7XCaNp3SK4T3mzplDFV064cHeOXB8i9KHTAsPoY6AzAMHzUhWoJxmsCyZLPlWTyLFiAO5RFWAgBwuaoMIfaSGKfxMPwl3XD6Nd0Bbt21Gi2volnlMymI/vrZi7DyqAIgA8v3J3VRZ6G8IolSVcLfiBghkA/VH57DiGOeYY5WbSpUOYQcCYCyANEsvGAFALZ4NCPS4A1G8eeDIub+GrrpzNc6A3z3z4+B8orgzDkn9NBZQ2kp2tBEI5f8O6aqFGeASIqjrSaeBR4ZulyheKll8RxSxzA5p4RgW3pAWN0RQBKAPWFLD3gyFEu4ruIEoSTkPk43r7myHeCm5xPIJ9CSDJo/dko/LV+QEPX+ZIwyptz6LEjGIRCC4Zk4SkOUEogPFs81XnX4fB1KGOJouS7ETkLUZA1xzuJ48tdlG4NxKOUqDFSHNyU8e8vzwgddGWkh3XZepRnghj9sIt7iRnaPKjqsH+mllYvTEiIVE2XG0IVIAyuSKCHciGlkon4MIlkci0+hLcvQ/piFii1EFvwwkskWXqmJMFNokiEqtpgDtr9ollDhcIqo3Ux3bHiqGeD6Z36B/LrwcR7Z85xzci+ddWKPnLw+hAnxpq6JkkFqELx3oozSpSxWqGwiJsrWQ4r3U0WGkwDzoXjSev4c4uWYo6cmHoxuVO4DdPeFW5sBvvgEvzF9qH3/LmNv1XAPnYE5kfFFJWDdBE9mWP/AsQqNl+rUY+qheD5E2bLOsVhuE6IrUZhGnedGEguGjjnFWyReFDjMInulw3TPJUMNgC2PJfzYom4AfCxZmKR1KxaI0EpCvAbxu98vhtdkk9Lqsoy1zLLGgIUq5gLPB/ZAtR6ChSCVurhcAwAbCj4BgOevRuF4SbpvY0WOetWvR5Dvi4rt+FKCyqJek9aM9ImQ+cfBolhCheBUvGH51OwA5Lyo+ykiPnJ/NhYbilexqHwcy+jnm/bLUTc/tB75S0FHI6aLuAtisfVtKpOIi1g34eYsViQGCD0QqTd1igwRiJResBt19kC5GUDkqixbADbQg5fvlGc2PnAV8kcDsYNZk/oyBh2bqtFE0Yq4rv3dVgCkpAeE9fE7aG8yfMQIhXLNL/35wOLRFsB0joCWsCblanrk6t/Kpot/+hnkjwQXL+hJ0ABCRQO5DU+EIM3b3LAQ4ZMyBIj4nTaabdU2pyC6FMR+XdQF1Fzeq4k+Szu2/Ea2bLhvA/K/BBf3JA0a7E+IrQFPJO7IIKO5CuVLVvvAvujQC+n4TDf3vaBIy5dqHUN1Bg9cQM984SXZdO69y5DvDQZJYjkcGpAPL94HBR0PYZ0v+u7vtFKFAJkIQOR8swcaAN2umcEIy+m5L+2TLat/jO0DlYKLdU2jExdnxE9NbA+w08TT8MCRyS6rU/Pg2bTZIoTa5k5nq88JIEV/+kq50XL6nWPIB4KOQ4NpYX0BgI75SYtyxeqsAI7ju9Asxmi6dpx23TDYLGHF9geRXxsMksUqlMJKEoTQ4fEpqtvecd58PgCazj9Er974+WaAJd/nbfRjQccY9jcD/Slxire2oxOl7gPPEApGXJ+laIWsmjMbgCvp9W893ixhaFtauEYhM2ju70tQDBs2HjQfhk8HEdNYzzA0v4y1nG8fx6pL8QKiewjx17sB2nPLVKsNGYK3qJcFP+PYh/QglMpYq8uVOXwVF1aXgo243E6bRuvWoh2gWmsGaPZGaKSnaf+tm9ps4QOsRf7XaDvPA5tfyms2zfYQIeOLNw2/bugz9rMseY8qSgmhNO4rvcBbgvPp/dtf7gwgITi2Lg8vUBQxkev2rL61tokPhAft0wL4YhkkhIi049hBh7Zf0eLDNoBTke9GmvmOXQC6iTen8ULVt34rRAUbPN94fOIjAPjn9AAS4ifIvzlf4hthpHXta1lOCBJAcP3osbL81Eh0D8Tf2NqvGwDvBf6IdMFcxMuyAdAqfiYPtELk8hWaklsN3qddAoBaa7/uH3eHtvEX6VeQTj4e60fDJhA/3TxgwQGEDJ06HTwi3vbeRjoH4ic69Zv+8/rQtlXIdxL/B3YcAJ3Ed4II496HmMT2fe/bRzl0mGA9xHf9/2zmPziGtp1B8h/FpR8UQLSZ7QDVqgwZThOI+X3vHOPt+zvEn08ObX99uvvO7i+moW0DxF/E+DVuHgDEwy20vhMCvHeoQHshHi9O/Hp7BcSPzyRtRoDh4WE1l8tpVXVlws1cfCcpsS9Ty//AvN1ImPqsxUcnM4fMGPZZb+wZpfGjJYe8+s/Uyee/E7d3V+PxuF0sFt3p9E0LEIvFzHq9zncLkka9nzqNzFNuITX+8ei1/PWABfKT25wFBK+MEExvIdbZ8uTWnqPqv35I+Sf2kPzblSeGraqqPTAwYI2OjnpzAkilUlqpVDIj4ptB+i4/l4yRr5JirMXjOjQpP7kTPgiXyUQc9RhupIj13OWPvPkyHRmbolrNtsmzXiZr//2U2/G3qPBowpgWwsqeEwAfpmka1Wo11iS8tTSWZSm97kLSF15EanI9CNLTxqTnTZFb3kn2xAs0tetFsvYVIsJbS1vTNHvx4sXWwYMH5+aB4Fi6dKkyNjamI5Q0x3F013UDALVDCfOv6qP4SYtJ7x0E0CIxiFseJTs/RrUDR6jyRo7kJx7XF9pUwtoOi9Z13c5msw5C5/jnQKdjZGREGR8fVwGk2LatwrWceJywnGZcDwID8Vzn0oVYFxPWSyaTbrdYnzeA/7fj3xPd83yskzjGAAAAAElFTkSuQmCC' /> <h3>Modified Image</h3> <canvas id="canvas" width="20" height="20"></canvas> 

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM