0

I have an image in my Vue.js component with the following HTML:

<img :src="thumbnail" style="height: 165px; width: 290px; object-fit: cover;">

The image is displayed with the object-fit: cover CSS property. I need to capture and save exactly what is shown on the page (with the cropping effect) as a Blob using JavaScript.

I've searched online for solutions, but I haven't been able to find anything useful.

Any help or examples would be greatly appreciated!

Improve this question
6
  • Screenshot? check Commented Oct 6, 2024 at 21:03
  • It would be nice to use html2canvas library, but object-fit is in the list of "Unsupported CSS properties". Commented Oct 7, 2024 at 6:11
  • @FedericodiGeronimo yes, you'll have to do the calculation yourself and draw the relevant part of the image. Commented Oct 7, 2024 at 8:42
  • @AHaworth got it, so the question now is: how can I do this calculation and draw the image I want? Commented Oct 7, 2024 at 10:05
  • in that list of unsupported properties, "object-fit" is a link to an entire discussion on the html2canvas github with many users posting their workarounds Commented Oct 7, 2024 at 16:06
Related questions
7580
How do I remove a property from a JavaScript object?
3347
How do I disable the resizable property of a textarea?
1904
How do I check if an object has a specific property in JavaScript?
Load 7 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.