Home > OS >  Is there a way to edit an image before saving it to the database?
Is there a way to edit an image before saving it to the database?

Time:02-24

Our images are being uploaded by the users on the web application (React) and being saved on the database by our API (Loopback).

The images will be used in our Qt application and they should have round corners. We have some processing limitations so we can't clip or mask the images on Qt.

We have some out of proportion images with dry corners breaking the layout right now and I need a way to crop them to the correct proportions with a border radius on all 4 corners. For our next application we should have two rounded corners and two squared ones but if this isn't possible I can try and change it.

What I have researched so far:

  • Cropping libraries (lots of them, but most had rectangle or circle as options for shapes and no clear way to customize the shape).
  • Ways to add a pre-saved mask to the alpha channel of the image (couldn't really figure out a way that would work).
  • The HTML tag canvas (still trying this approach).

I'm willing to try almost anything as long as it doesn't involve major changes to the Qt application.

CodePudding user response:

I would go with the canvas approach, since you would have full customization which is useful since you mention you'll be changing the requirements later.

  1. Create a canvas
  2. Draw a rounded-rectangle mask (see these wonderful answers 1 and 2)
    • Use ctx.clip() after drawing a custom path.
    • Or use ctx.globalCompositeOperation = 'source-in' after drawing a mask image
  3. Draw the actual image with the desired width/height and stretch/fill behavior
  4. Export the resulting image using canvas.toDataURL()

let width = 300;
let height = 500;
let radius = 50;

let canvas = document.querySelector('canvas'); // document.createElement('canvas');
let ctx = canvas.getContext('2d');
canvas.width = width;
canvas.height = height;

ctx.beginPath();
ctx.moveTo(radius, 0);
ctx.lineTo(width - radius, 0);
ctx.quadraticCurveTo(width, 0, width, radius);
ctx.lineTo(width, height - radius);
ctx.quadraticCurveTo(width, height, width - radius, height);
ctx.lineTo(radius, height);
ctx.quadraticCurveTo(0, height, 0, height - radius);
ctx.lineTo(0, radius);
ctx.quadraticCurveTo(0, 0, radius, 0);
ctx.closePath();
ctx.clip();

let imgUrl = 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHCBYVFRgWFhUZGRgaHRwcHBwcHBwaHxoaGBgaGRoaGhocIS4lHB4rHxgYJjgmKy8xNTU1GiQ7QDs0Py40NTEBDAwMEA8QHxISHzQrJCs0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NP/AABEIAOEA4QMBIgACEQEDEQH/xAAbAAABBQEBAAAAAAAAAAAAAAAEAAIDBQYBB//EADcQAAEDAQcCAwYFBQEBAQAAAAEAAhEhAwQFEjFBUWFxIoGRBhMyobHBQlLR4fAUFWJy8SMzU//EABoBAAIDAQEAAAAAAAAAAAAAAAECAAMEBQb/xAAlEQACAgIDAAIDAAMBAAAAAAAAAQIRAyEEEjEyQRMiUWFxgUL/2gAMAwEAAhEDEQA/AM5mUNu6XIkfRBONVxInr5MYVwp0iu64y2IBECvQE/NWJFTOPcNh5ytN7O4ns4gHnnqszmDampUTbVzSHA1FVHHsVzVqj2OxvTXtykTRVV uhbTLTYqjwXGAWg5q7jg9VqLviE8GeVTNKWpemWKljdrwztrh8mdkPeXFoyt31P7q xYsEZIk1I1VT7vOaV2/kJFGnRuhPtG34V77q7KDlhvOhPqmnLlhrancxNforVtx8YYdSJHlwrizwhoB1MhXxhJ/Qss8I sx5urztQb0Uhur4GVsdZWxs8Ma0lxmCAIOiKbcGxAbH3TRwMqlzIIwjLq8OBhEW7XOaRuTP1mVsrbDgK eqBOHh1YhCWKUQx5cJGLfZluoPVMcYGYEH/GtI3WmvlyLQMrS6fkq68YdP4Yokpr00xnGStFJvKKtHmkDsRwnvuzmkFq4WGAf5 yFjMHkjotZ7PWLQyQR3WbuFkXviN6rXmzFlZOLREAp4rdmTkS11BcXvWcljatb8ys  7OrEAfNRm1cXTNVK20cRqPuqm23bLccFFUiBjHDdL4TVJzDsfIp1m6Za4RwVLLTj2joTyhHu8VUS6dNlA9m5UIiOi4nZQuqBG2tGxufogrZsQDqax0 yvRhT3lsw0Zc0kwAFS2tkM5ymRPxHcforoqvSpyUnSIjGjWwPU qRZlEnyTnvig8yoHEmpTJ2SqRG50lNKflUtzujrR4Y3/iZMVo7hhfn8AnniOp2W8uF1eQ0SK/NP8AZ/CWMBaIJGojfckrUWF1DRAAiNjop Lu7Zly51DSKm74awGoMidTsUTccLaySKSrL3TQ2pgdTXyQ9tfADAA00JDacyrFjjHbMjzTnqI9l2AIkgnaYmvCms7ISdP07oK74kxz8pa1mnizZgekqJ LWYc8UcRJoaGBPmnUoVdlThkbqixd0/bvJQ15xixZ4S T0g/NZDEsetXktz5W8CiqH2hOpWafK3 qNuLgNq5M3tpjFkQDmC5YYjZuMZlimPoOqbZPhwM6SqXyJN7L1wYpaZ6A0NcIHrsh7a5CCVk7rijmEHMeoOhC2twtmvY140d9eFfjksmmZs0Z4N3ooBhbmtJ ImdVW3rDiOhK21sye3ZQWl2BGlVJYE/Bocx/ZlPZ66HO7OPEKhXGKP8A/NwPELl4uZZ42kgjjfugrxes7C00cfIGqrdxi0y75yUl4Ubi0GqcYikLttdvEZKgfZjYqhGs7mO4Szg9B1XHWhA2hDPtuEQoLgcqG0IAqE0TElMc7kIho74eElHISQslF/f8Ofb2hJlrBQbCBsszemAEhvwgx6L0HGg3JlL8jRQ0cZ8wsZiFkwke7eHc0gk eq0yi0YsE79KkAbhROajH2Lp0TCwjVqXsawaybLgMuaTpyvQfZ3BmtbOUDNB7EbVWf8AZ/C3PdngggS2Qt7hDX1a9opEHT5BWQ/Z0Y TPrHQfdLs1onLBPaT6KK/X9liPEKcnfoIqu4neQxhOYiBtEydBXRYO3e 0cSDmI/CTWOhOpVmXL0/WPpiw4HmfaXhaYr7RF/wgR1qe8qqt737xoMiRObk8V7IG0JaWvbzoaweoK5f7yHxDAykQNzysblKW2zqQwwhSihzLQikmlQZkc1 iNu9/Lg5paMxFDoqYE6TTUKaxe4GSKTqk/0XuKfo 0bJKauPMk910GN6oUWIIBAidlA81KQfRcmUKIkdbVabAL1F3tWz8NW/7dB6LMB1UfZXosZQw5/xHpwmhLq7Kc PvGjaXfFQGt94WgnatO8aIyytGPq1wPTdecWt6J37orDrw8O8JM8yro8mV7RgnwVVpm6vLSZhvzVDiNwJ01CPu2OMkMe Xfmj6os2QJJmcyvko5FZRjcsL2ZMBo8LxPBGo7jdD2llZu B1eDT6q5vuFiS/dZy XUxIkET5rLKPXTR0oTU1aZx9iRTKT3ohnuANGQR1 cLt3vr20JkDlSi/wATTVBIe2COfK4GE/i8kUx7DNNaJ9vdy XM31AUD2BPdpJ/9Fafkd6JIBtGrscRe0EGHNNIcJBH2VdeLuwgllgwHXV33Vla2Y3EfJJlhmaWg68GvqrU5eWY4uK3Rkr374GMmUf4hRXCzc98F0DefotG xyDKJMHU/qp8GujHlwcW1BGWkzSoO6VNt0XymlG0X2C3JrGNMDMREt0ICu7CzVfhWHmyblLswmazRWN4fkaIiSaSuhBdY7OJnl2np2Y/wBr7ZwIaT Iny0aPqsq9wNCMrhvoVo/aloYWyc5eSXO4JijeAIWct7uR4gc3qT5yufm bZ2OKl NIibuJUdpXaF0iE0tnRVo1CCnY8u6BvUf9Q7pTd0VoLCHxsddQmNHyTrZkQf5/KJpMqBTHv6JB1ITGroJGiWghF2AJqNKpj3kuJXWeFpO50UItCSpQreyVrdyYCkZey2gQ5dOui41hJ6lRAaD7veQZLgtBguLj4Hmm3msoGwFKy0MpozcXaKsmGM1TPRX2QcNZVDiFx1kRCl9m8RzzZvMkVb9wrW3ZMjnc9VrdZI2c1Slhn1Z55fLv8AiA7oTLwVqsSu8S0jXgLN29hlJWVprR0oS7K0RPu7hXY8Ka5WhZNT8wmy5u6a480RWw0WH9zfyVxVkN/MuKUSkFXjELR5Oo7p11tHipce4KFDweU9trLTBII2RWydFVUW9lbkggOJ5ryrjCMOaXBx2MhUOC2ebxbk8cLe4NYiI4rMaJsce0zLyJdIOixfaBjM7jQLI4rjGZ0teW0gVmP3Vx7U23gDJpr3O09Fhrzyn5GZp9UUcLApLvIba30glpJcOv1ULnzMTVMDgHAlocAZjSR1XC4T4ZAmgJmOizfVnUUUvDskiswoclaKaJNDPKiy1oiMhpELgcBqF0yKBIGvKgCd1qXMjaZ8xP6qBgkiKJ7KgjzUbRsiRDi7/imuzJJlopWVCyhpVE/CwzqVGFg9q8k9NgkBEymArobNSUoBNdNNlMxxnwhQTwKKezB5gKEHBkpx2gJPa7aAE6yY80zfVKFhVwtix7SDBlb JAPSVi7jdWsOZ7wOsSfILWXPF7N8NDqxFYExEfdauO0rTZzObFyacV4Q3 zDqaFY/FLrlJA7rdFgjrvys7ilzaXF5mg8qI5o/YOLl/8ALMtM0gCm6Z7omuwopr0yPEIOY0UExqVQdA57tvRJSS38pSRJsGN3cADt3CWc6R2URJNNUTd6ubrH6Isdl1h1i4ZA3aF6BhzcrQ4navosjhsZRrM UK5dejlIBiAphyKLbZzuVFz0gL2ov4zQ3zPJIH7LJvt5OlUbihOeswVXOaqpS7S7GzBjUIKJx75JKY8hPDeDK77udVFZeMY8gEACu8V8iiLPI9vikHp9 ENEbrjLaD314jiE3orOvEGI9T yaXiKfv6oiytR8LoI2KZeLPKJFW9P5qoAju4h49PVNczxGdifqpG2lYaTE79U 8sIeZFDVFAshZm0bzqp8Qo4N3Ar3K5dXAuJiIrTom2oJOfn VUZF6QTsApBl3lNzk7aKTMfyj7oBsWdrdB6pMe6uXRE2d1BEu8Pf7KV72MbpXtqgG0QWVhNXGApX3oNEMnugxaF7pPopMlR9EKD76IPLviNFNZ0Mg0UFo1xNfrP0Tag1oo0Bo1uDYwZDH1Gx4VzeWBzTIpWiwti6Oi3NzdnY0/4j16rVgm5Lqzl8rGoSUkZC9Br2ywZcp0IQIuYAzOcJNY 8rVYtYDLQR2WRe8AiawdFXOPV0a8M 0bRLmbykmf1DPyfNdSUXFW1sb/ADqjbgM74iAgC2dSrLBmgv5qAml4NLw1 G3cQrBtymYoCFHhbQAj7a0DWOJMSD9E8IR67OVlnLtSMfir8jyw7KpfazUARxEq0xq82No7wgtik0qqyzsmCueOyodJujpYvir9OMLCfHmA/wAWg/UrhDAdXkc0B9EsrwKGW909lgTTwjz iax2iB1nB2IJ5 qjNDsO1dEULk92kRC4cOdMZ2zwD qiJaA88NJcJjyKmul/GhZQ81EIm0w9zanxDin8KrrvZPJLchB7Gk78JqEckF3qwIOZvwJt6s3PYx3SD5KbDJD/AHb6g0IOx56IzEMTZYEMYyXNJa9rpIM7gjiAQpGF7K5Tp0CXdmRniEPdTiiGaXA0EfNXl8wpto1lr75gYWtJrWYrDeZUd1exrXe5owmtraDUbizaKk6pnja9Asya0AtuR38J1rTXpsprxemMAaIL93UPohb9bS6GyR Z2rupKHDG7yT8knhare2S  cZJPmoLV86lOFnvIjj6JGn4TXSUCxHGCi41hJScHHVSNY2P0QoYcGEaEBSe6nUqMObwfmnEsIpmB7ylYodY2TRoPUytng7/wDxb/KSsNdXwee632GOabFpaIEER5rRxPkc3n/Ff7K3FyA3VYq9Vd0Wpxy9sDshNYWTthXSiOd3It4cWo7OZBykmVSWejZQGXRsrTBXUJHPZVjgQabdFb4ICePi47J5eEm9G5wtnhk0Vbj96BhkkCYPlurO5DwU1Wfxt8WpbqRWopWvqnm3GCSOdiipZW2U96DBoCP5suvubHDOx1BUg0I8jquvsw52uXeR9gNE/JZgfE8nYH7qqNHQeiva0zSSE45tfJGe8axpaGy5wMu44hQe7DoGY7kzQTGglFoNjBZkVI66/ouOsw4fEWn1HzRNlYGgB8JmSQREb9V1luWuADZHWv1CHgHvwjuzrRlXGWjcH7HRK198XktvAy6jMTMaxlDdtFJebXO3KG5Z4roVEywbRupnadU3ahHG9sOde7VjHWrbGyeGkBzxMikhxYdO6zF8vRtHvedXEk fC2NreRYWT7JoLnvaWwK6jSB9VlcRwi1sGsdaNgPHhIIOlYMGhqr1uOihNKTv/hZeytzbeLUMe8hja5ZNenRT45bPc9zS3I1vha3ZoH1nWUR7I4I8PD7Vr2Mc0OY4ENz6mN9hoVPfMeY52VzXPaKeMtJp1yz81Jr9UmJBt5X12igbEVeaJ73nVp9N1ce7u1qJDix3X9dkE7DS0 F7XDoQs7VGuMl9leHDhda47GiOfYMiCC1w3BoR2Qz7BzfhqOihYpIjzncn6/VdYXHQt9YPoo3O5Sa3qpZCYBwRF3Ib8TGnvP2KGYP8vVTEFuyVke9BLG1o2P51W5wthZYNB1ifWqyuCWPvnZSNIMrYX20DWx6ABaOLFq5M5fNlbUEZTHSCZIr81mLQmei0GMPnVZ86yq5yts2YFUUiKTykic/QeiSrNGgC0szESrjAGRQ/v5IC8ODBUdgETgV4LnmehVjtorm9HoNyfDR2WYxdua1eXGJWkwi0DmUr9lV 0N3GbNsfqmyp9UzDhaWVpmeNkz85PQCD9VHa2Q1a TwRB VFIGA0a4CNZ 0KMZGmpzdOqpT0dEWV1KtdMaDTunnXUE7cehXTauggNIEaQQowS0ZQSc1CAPuoQleAYzZiOgA6bpuVpo1z3COB5iVGDGusQJ2CTnl0DQaQN1LRKZLmrFWzoJknzVlYXXI3NRriKvcKMHQfidCEZDBmdGakD8sblRWl5kgwTGsmh8kydCSi3pE1tegJbZ0kjM4/G7ufWitbjfWMsxZPbnE5nT GghUNkczwSIAlxPO6Fe9ziTWpn5oqbTtCSwqSpmrv NZLTxEOZDSG8Q2kHZZ6/wB1af8A0sx4dT0nlNvTgSJMEADfgJXa2ySKnaNQQdQVJTcvQwxKC/UHZZNMSe407QU97GtqHOPyhSXy7hhDgJY7T9D1Q7zOlEvhct7JbO kayB3B RUgvldndRRBx085XKdkA0g/Ox2s iitboSJZUdFCCRqAe9VPYE0qApYGqIGgg1bPdH3C6PcW9UXd7yGgSGP/2AO62GFFj7MFjA0kgGggD8UQFZjgsjqzJyORLErojwTD8jcxAnY7qPFbyW0KuLY5RQU8/oszjdsACYWuaUIdUc3C3lydmZbErwTPmqySIhFXx07IexBJAjqsSOzFUh8nhJHZQkoNZR361JIioT8Ptcto2hrT9FC 0LqgRO3CYHuB7V aurVCno DPySCTWseiPxmyD7ORtXyWewe95gJiKLUXVuZsKR/aLiYcq6z7GGN3kkAiJqZhOtmsYSWDtNfNH3/Dcj3RsT6FBm66kvE8VWZNrRvUlJJ2CAveTLoG52C4WtA8LyT1oPrKdeWu02TW2YjMc07CN53RHRwAj4tSinFrBQD91GSB4jrwonW0mSELDVnHz8RqmONJmq6bQkViJnrTjhSssw op0RCcBhmb81J7VKGJOw80Te7QUaNB/JQ8zyogImvIow7kV9VFqJRL7LMxtdFFng02SkRPYPDmlrpIPy6wgbVhaSD/AAIljxPCktWB4Nat iNkqgJtmXaeicJaYcPIro8JqA7z hC68jYnzRCdY8CkfyU8wd46JNYdxI5CkNgOfVBivRNd7Ik6gcLe zcNsK6yVibjcnkjKCQSt3d7P3bGtnqe51V/FtSs5vPkmupJf3w1YfGbR YyZbstdf7YZaeSwuI3otdmNQCPrRW8iVtIr4cKVhT8BcW0qSK108kA65OsyARU0r0V7hmJNeZ0jndTYhZ5/EGyRVJKEatGlZZKXVme/pnfmC6uxafkSVdMt7IqXMjZBXhwlTPvpFJTHPDhJ806Q1h A30TlOux6Lb4JiALw0V1leZMiZGo0Wy9mcVDjENn8RMCFEmpJopyxUos12J4eLZss ITHVYu 3V7HGRUaj7rf3C0I6deVPeLuy1kOZpvp6FXTwKf7L0w4uVLE slaPMM7o0Sf4GhzviOg 5W5vODWbA54bmAG9cp5g7LD4lYFzvEYgzOvlCyzxyj8jpYM8cnxBXPzV3TXlTgNA5qmEdIJ27qpmqyByKu4NY7DuoXgCgqU8ugAeagWK0hpnfbpCaXl2haP5yonSdU/RFMWgiwBDXA6d5 iYWs2me/z0Utm7MChw0yg3siOAVK7YvAcJ0NPVcc1RO2UTG9CLywMNBLSock6HyUrXT4T/D icLEhNYvhAxzhtACsbu YpKdZXJ7hMfv0AWpw7Bcga58UA231qioOXhRlzRgtheE3UNswS0Nca9gdFPa2kD7/dQXi9DNrRV2I37K3VaO0YqkcxY5ZJ2yHEr4ANVicZtS4geZ yMxbEYpMuP8qgmH3rI/ENCq0m32ZvhFQVAl1vTmGhWkuGMB0STO6zDmGa9kTc7uXOMcE iZq/B31a2bT 5M6pLE 8fyuqdZCdYf0CyxvJTffEghSPc2p3QxcrEMxAInDg8PDm/sRwVy53dzytJc7iGgGKBLKVaQr0X2BYqQ4Zy7xQIJEDanRbL3hggaryu 3wHwtmOforbBPak2bstvmINM9TEctVuLJWmY8/Hcv2iehnxMc01BEQsziuHZiaAN4g6xqFd2NqCA5pBbAIIrRSv8UV69VZlgpoyYcksUrR5tebkWOIOgmqEOs6/rC9Hv2F2dr8XhdpI37qjvPsoR8L2x1n7BYZceSetnXxc3HJfs6ZkrGz3TS6a/yqvsRwv3TYzBzvxRWOAqa2s4oqmurpmqM1NXHwjfZzpGi4dUXdrKZQ5Z4jRAnbZNcbRs5SImk8FMDSCo7u2qsrxZVNKmvrVSXhLpgD2aqLIrBzAn3W5F0iCTtHKCC5JK2Atsdls8CwdtpZNc8QdjyOoKhwn2ZcSHWkhvGhP7LXMDWANaAAKU4W3j4L/aS0cvmctfGD2BXbDbNhnV3X7bBNv1qGyCQnXy NbJJmFk8TvuYySeBwnzTjBdYmfDinklcjt7vMTX0VDiN McqG832Ja0yeuyEZaOmsHusUU/WdRRUVoBfZuJzO332ReHgh7SDoUaHMd8TY7FaHCsGYWh7A13GZ1AeoAWrGuz0UZsqhG2cxT2fY90tcGO3BoD1ATrnh1lYty52ueTWNBGys2ezmd e0tnOcIFKDy6JP8AZRokse4Oqa115W38aTujmPPapsE/ttlwkrD wP8A/wBPqknr/Av5P8nk94sfxN0PyUTGZiBCIzK0wm5S7NHZc5ypHeaCsMw90NDR/sljV ynIzahK0Tw2zsyZ2Md4WNeG5i4mSZKrSr0qi 0r/hBascBNUmWmah9VMwkylk7I2Wl1gGPvu7wx8uZp8RgLe2F8a54y6FuYEdSKLyXMDqrjDcWdZRUxQTrSZ0VscjijLm4ym y9PUWvopmWgFFlcPxYPrm2Hh46yrSwvFSZk7StEcqZzp8eUXssb5d2WjS17fPf1WbvvstQ5HA8A6q7dbmlf50UlnbGKmiWcITe0HHky4lp6MdYYZa2LX/APmSXU0mnKDZhpc4UjmRovQ2vC5aPaRoCqnxVWmXx50vtGMuPs 57hIho3/Rai8YVZvABAkUpxxVENtU42uvKshhhGNPZTl5GSUk1oEssGsWj4Ae9UQyyYz4WNb2CifemjU6oW83sCp2Rf44IVfkm9th1vecoQN v Vuqz15xYl5BoBUdlS37GBJ8RPTWFU89 GrHxKastL9iQIOY/8AFmr5iJdRppyhbxei86UTLNhJgBZ6t2zfGKitEjWTUyfJTNs hHUgppDxSIPcH1hFWV1e7Umu1VKDYOW708xqtV7IvebUtjwlpzDaBoVV2WGZz43RJ3NAOwqtrhFyDGZbJzZPxPJknsBotGCDcrMfLyLo1XpbsYGCmnEadknuc0aydhGqc9 VpLnUA9fJMsHOfBPhbsNz16dltfpxV4BTePyhJWfh/wAklNhtHhtzuud8DRbK4XPIwuMQB9FV4BdeRU1RWMYhTINNCuV2t2z0crk6QPe8UDyWRLUP/StgwAZ7UQnvNtB0Tmvc3dByH60tDH2b5I0Ch92BuZ isTbB4iADyPuhX3SNTT0 aKkgeAzmAnVJztp7LjmAHSicHRsjQbH3e8vZVh7hXF2x14ZlJLeSKqlI30XGvrKlAdP02N1xuYzOmmvTtyrRmKsDdTAkkc00Xn7Gfibso3272E5XmDWJ iKcvplMsUGz0ixv2fK8GKGlPRQvxHLAFKc9d1gTilo2sjmo022ITP7y gIaRPWfmUXKdaFWCFm dijgdQuWuLNGrllrvei9TWrIYSSlUpf0DhBOqLK3xtjKAx3rP6KltsacZguNZG3l2QVq5p/CJTQwpG79LowS8Qy3tH2hqYHA 6jbdOqKyHkIy7Xdn4pcOQ4CPWiKbYz0V9jdm7mTwIEoqyhs0aOhOnkKqZzLJmoca7EHbcjeU60vzY GY0zBpI SdIG2DsvT58LQOsfsnC2doXmvClFq9zRLgGgTDaRJ0oonvI4JrXXtqlY6Q0sI1Lj5GZRuHXl9m4EPOaZjpqhruzdzta10891YYTdM1o0E714A3PojCT7KhMij1dmsxuxtrQ2brJ VzYcQWy0g89tVYXS/Pa4MtGgODQSRoTv2Crrx7SsY7KyHRSTx0AVrdb0y1aLSBQHMOIErpRnFuk9nDyY5pK1oL/rmfmHzSVD/AH x/I30STd1/Sr8Mv4ZrCtPJUt  I9ykkuR9Ho4/MERL9EkkGWEVnr/ADlFXn4SkkgvRGV2ygKSSuRCRiZZ79kkkGKE3PRyHt9W/wCq6kmXgr9IrxqUKNUkky wovbhorC8/B5pJKr6KpfJFRafEnu0SSSfRpQrHUd/uEbePiPY/VJJRCseP/mP9ioLP4h3CSStgMGXnVnmuD4z2SSUYEQv JXGFb/6FJJJH1CZPCrstfJav2f/APjb9j9F1JXY/mZ R8DHpJJJyo//2Q=='
let image = new Image();
image.addEventListener('load', () => {
  ctx.drawImage(image, 0, 0, width, height);
  console.log(canvas.toDataURL());
});
image.src = imgUrl;
<canvas>

  • Related