Distorted images and CORS issues about vue-2-img HOT 6 CLOSED

Thanks for sharing this. as far as your specific issues:

1. Image distortion:
   I haven't encountered this, personally. Is the image set as a background image with css or with a or element?

2. CORS:
   Thanks for the fix! I can incorporate it into the codebase.

Can you share some example code to reproduce you issue?

I'll release an (overdue) update once we can settle these issues.

from vue-2-img.

I encountered the image distortion when applying the CORS anonymous fix. It should be patched now, let me know if it's working for you. Version 0.0.5 is live on npm. https://www.npmjs.com/package/vue-2-img

from vue-2-img.

Thank you for the quick action!

Unfortunately I get this error now as soon as I execute the function, both using imports and the CDN

from vue-2-img.

Hi again,

I took a moment to look at this, and got it to run by changing this:
document.querySelectorAll(target + ' img').forEach(function (imageNode, index) {

to this:
document.querySelectorAll('img').forEach(function (imageNode, index) {

Probably not the best performance though, but I just wanted to find a quick fix to see if it worked. Maybe target.querySelectorAll('img').forEach... is the right way?

Now that I got it to work I jumped into more problems though! Not in your code, but with html2canvas not rendering mix-blend-mode, and sizing images with object-fit incorrectly :. There's been plenty of issues opened throughout the years with workarounds to implement it in case you're interested in adding them!

object-fit: https://github.com/niklasvh/html2canvas/issues/725

mix-blend-mode: https://github.com/niklasvh/html2canvas/issues/580 + https://codepen.io/SevKel/pen/ZEOLPEg

from vue-2-img.

Thanks for checking that out and recommending a fix. I implemented the target container node then find img elements in the child nodes.

Yeah, html2canvas is great when it works. It's been sluggish to support some of the new HTML/CSS features. I've thought of maintaining a fork with some fixes/additions, depends on how large the scope of the project will get.

from vue-2-img.

0.0.6 is live now with the fix. I'll close the issue. Thanks again.

from vue-2-img.