JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea id="canvasInput"></textarea>
<canvas id="imageCanvas"></canvas>
JavaScript
var canvasFabric;
var imageStringValueBtn;
$(document).ready(function () {
initCanvasInputAction();
});
function openImageSaveModal(btn) {
imageStringValueBtn = $(btn);
startImageInput();
$('#imageSaveModal').modal('show');
}
function initCanvasInputAction() {
$("#canvasInput").on("paste", function (e) {
e.preventDefault();
var input = $(this);
retrieveImageFromClipboardAsBlob(e, function (imageBlob) {
if (imageBlob) {
// var canvas = $("#imageCanvas");
// var ctx = canvas.get(0).getContext('2d');
// Create an image to render the blob on the canvas
$("#imageCanvas").removeClass('hidden');
//var img = new Image();
// Once the image loads, render the img on the canvas
// img.onload = function () {
// // Update dimensions of the canvas with the dimensions of the image
//
// // Draw the image
//
// };
//ctx.drawImage(img, 0, 0, this.width, this.height);
// Crossbrowser support for URL
var URLObj = window.URL || window.webkitURL;
// Creates a DOMString containing a URL representing the object given in the parameter
// namely the original Blob
if (!$('#canvasBlock .canvas-container').length) {
canvasFabric = new fabric.Canvas("imageCanvas");
var canvasDiv = $("#canvasBlock").closest('.modal-body');
canvasFabric.setDimensions({width:canvasDiv.width()-30, height:canvasDiv.height()});
}
console.log(URLObj.createObjectURL(imageBlob));
var reader = new FileReader();
reader.onloadend = function() {
base64data = reader.result;
console.log(base64data);
...