JSFiddle - React, Tailwind, and code Playground

by muavenet

HTML

<div id="preview-row">
		<div id="drop-target">Resmi bu alana bırakın.</div>
		<div id="preview">
			<canvas id="canvas"></canvas>
		</div>
	</div>

CSS

#preview-row {
			position: relative;
			width: auto;
			padding: 12px;
			border: 1px solid #ccc;
		}
		#drop-target {
			position: absolute;
			top: 12px;
			left: 12px;
			width: 100px;
			height: 100px;
			background-color: #eee;
			border: 1px solid #ccc;
			text-align: center;
			padding: 12px;
		}
		#preview {
			width: auto;
			margin-left: 148px;
			height: 100px;
			background-color: #eee;
			padding: 12px;
			border: 1px solid #ccc;
		}

JavaScript

require(["dojo/dom", "dojo/domReady!"], function (dom) {

                var MAX_HEIGHT = 360;
                var target = dom.byId("drop-target"),
                    preview = dom.byId("preview"),
                    canvas = dom.byId("canvas");

                var render = function (src) {
                    var img = new Image();
                    img.onload = function () {
                        if (img.height > MAX_HEIGHT) {
                            img.width *= MAX_HEIGHT / img.height;
                            img.height = MAX_HEIGHT;
                        }
                        var ctx = canvas.getContext("2d");
                        ctx.clearRect(0, 0, canvas.width, canvas.height);
                        preview.style.width = img.width + "px";
                        preview.style.height = img.height + "px";
                        canvas.width = img.width;
                        canvas.height = img.height;
                        ctx.drawImage(img, 0, 0, img.width, img.height);
                        myfunction(canvas.toDataURL('image/jpeg', 90 / 100), "asdasd");
                    };
                    img.src = src;
                };

                var readImage = function (imgFile) {
                    if (!imgFile.type.match(/image.*/)) {
                        console.log("Dosya bir resim değil: ", imgFile.type);
                        return;
                    }

                    var reader = new FileReader();
                    reader.onload = function (e) {
                        render(e.target.result);
                    };
                    reader.readAsDataURL(imgFile);

                    
                };

                //	DOMReady setup
                target.addEventListener("dragover", function (e) { e.preventDefault(); }, true);
                target.addEventListener("drop", function (e) {
                    e.preventDefault();
                    readImage(e.dataTransfer.files[0]);
     ...