my problem now is that when i click on download image the image is downloaded but the image is black just the text shows up why is that? i tried many things but i haven't had a result. i made a div with an image inside the div i also have a text box inside that div where i can write text and change color i can also upload images from desktop i want to save that div into an image and save it to my desktop but i don't know how to do that. here is where i got the idea How to save img to user's local computer using HTML2canvas
$(function() {
var element = $("#firstshirt"); // global variable
var getCanvas; // global variable
$("#btn-Preview-Image").on('click', function () {
html2canvas(element, {
allowTaint: true,
logging: true,
onrendered: function (canvas) {
$("#previewImage").append(canvas);
getCanvas = canvas;
}
});
});
});
$("#save_image_locally").click(function(){
html2canvas($("#firstshirt"),
{
onrendered: function (canvas) {
var a = document.createElement('a');
// toDataURL defaults to png, so we need to request a jpeg, then convert for file download.
a.href = canvas.toDataURL("image/jpeg").replace("image/jpeg", "image/octet-stream");
a.download = 'somefilename.jpg';
a.click();
}
});
});
.container5 {
background-color: transparent;
width: 220px;
height: 320px;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
border: 1px solid red;
position: absolute;
overflow: hidden;
}.container {background-color: transparent;
width: 490px;
height: 500px;
border: 2px solid;
position: relative;
overflow: hidden;
/* Will stretch to specified width/height */
background-size: 490px 500px;
background-repeat: no-repeat;
}
<center>
<div id="firstshirt" class="container" style="float:left;">
<center><div id="wrapper"><div id="boxes" class="container5" style="float:center;">
<div data-bind="foreach:items" class="fix_backround">
<div class="item" data-bind="draggable:true,droppable:true">
<center><span id="texter" class="text" data-bind="text:$data"></span><input class="edit_text"/></center>
</div></div>
</span></div></div></center><br><br><br><br></div></center>
<br/>
</center></div></div><center>
<div id="previewImage">
</div>
</center>
<center><p><font color="red"><b>Please preview and download the image and upload below we apologize for the inconvenience.</b></font></p><input id="btn-Preview-Image" type="button" value="Preview"/><button id="save_image_locally">download img</button>
<p> <label form="file">Upload Downloaded Image:</label>
<input type="file" name="file3" id="file3" required formvalidate> </p>
<br/>
</center>
<script src="https://rawgit.com/niklasvh/html2canvas/master/dist/html2canvas.js"></script>
<script src="https://files.codepedia.info/uploads/iScripts/html2canvas.js"></script>
<script src="https://cdn.shopify.com/s/files/1/1602/3035/files/jquery-3.1.1.min.js?9312974637985503683"></script>
<script src="https://cdn.shopify.com/s/files/1/1602/3035/files/knockout-3.4.1.js?884425216910251312"></script>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script><script src="//cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script>
<link rel="stylesheet"
href="https://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script><link rel="stylesheet"
href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<link href='https://fonts.googleapis.com/css?family=Philosopher' rel='stylesheet' type='text/css'>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
Related
Sorry if this is a duplicate I'm new to JS and HTML and I can't figure out what else to do.
I am trying to make (mostly from JS) a way to upload images onto any background you like, then saving them as one image. For now, I am experimenting by putting an image of the scream onto a canvas and then trying to upload an image of my choosing. Currently when I press save image, it saves ONLY the background. Also the background and uploaded image both overflow out of the card, but removing position:absolute in css stops them from overlaying. I've tried stuff with MarvinJ or even just trying to not use canvas, but can't get it to work.
Sorry for the big question, how do I merge an uploaded image and an image of my choosing onto a card and save them as one file?
HTML:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name = "viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type = "text/css" href="blank.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<title> Petra image </title>
</head>
<body>
<div class = "wrap">
<div class = "card-container">
<input type="file" onchange="previewFile()"><br>
<img src="" height="200" class = "Card_Image" alt="Image preview...">
</div>
<div class="card_main">
<div id="picHolder">
<img src="" id = "pic" class = "test" height="300" alt="Image preview2" object-fit: cover;>
<img id="scream" class = "scream" width="300" height="480" src="img_the_scream.jpg" alt="The Scream" object-fit: cover;>
</div>
</div>
</div>
</div>
<script src="blank.js"></script>
</body>
CSS:
html, body {
margin: 0;
width:100%;
padding:0;
}
.wrap {
display: flex;
flex-direction: column;
}
.card-container {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
}
.card_main {
width: 300px;
height: 420px;
margin: 12px;
background-color: rgb(0, 0, 0);
padding: 10px;
overflow: hidden;
}
.scream{
position: absolute;
opacity: 0.2;
border: 1px solid #000000;
z-index: 1;
}
Javascript:
function previewFile() {
var preview = document.querySelector('img');
var preview2 = document.querySelector('.test')
var file = document.querySelector('input[type=file]').files[0];
var reader = new FileReader();
reader.onloadend = function () {
preview.src = reader.result;
preview2.src = reader.result;
}
if (file) {
reader.readAsDataURL(file);
} else {
preview.src = "";
}
}
window.onload = function() {
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("pic");
var img2 = document.getElementById("scream2");
ctx.drawImage(img, 10, 10);
ctx.globalAlpha = 0.5;
ctx.drawImage(img2, 10, 10);
}
My problem is that after selecting an initial image file and trying to select another, the aspect ratio does not change in relation to selected image but keeps the aspect ratio of the image selected first.
I want the aspect ratio to dynamically change in relation the the natural aspect ratio of the selected image. I can't figure out a way to fix it without losing the resizable part.
var test = document.getElementById('test');
var draggable = document.getElementById('draggable');
var resizable = document.getElementById('resizable');
var img = document.querySelector('img');
img.onload = function() {
$(function() {
$("#draggable").draggable({});
$("#resizable").resizable({
aspectRatio: img.naturalWidth / img.naturalHeight,
maxHeight: 200,
maxWidth: 200,
minHeight: 20,
minWidth: 20,
});
});
}
window.addEventListener('load', function() {
document.querySelector('input[type="file"]').addEventListener('change', function() {
if (this.files && this.files[0]) {
img.src = URL.createObjectURL(this.files[0]);
}
});
});
#draggable {
display: inline-block;
margin: 0px;
}
#resizable {
position: absolute;
cursor: move;
margin: 0px;
max-height: 200px;
max-width: 200px;
box-sizing: border-box;
border: none;
}
.test {
width: 300px;
height: 300px;
overflow: hidden;
background-color: beige;
}
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/cupertino/jquery-ui.css" rel="stylesheet" />
<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<input type='file' />
<div id='test' class='test'>
<div id='draggable' class="ui-widget-content">
<img id="resizable" class="ui-widget-content">
</div>
</div>
The issue is because the resizable widget only reads the dimensions of the content when it's instantiated, not when that content changes.
To fix this you need to check if the resizable widget has already been instantiated on the element and destroy it, along with removing any inline styling which the widget added to the element. Then you can change the image and reinitialise the widget again.
Also note that if you're using jQuery for the dragging and resizing, it would make sense to make the most of the convenience it offers for selecting the elements in the DOM and adding event handlers, too. Try this:
$(function() {
var $draggable = $('#draggable');
var $resizable = $('#resizable');
$('input[type="file"]').on('change', function() {
if (this.files && this.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$draggable.draggable();
if ($resizable.hasClass('ui-resizable'))
$resizable.resizable('destroy').removeAttr('style');
$resizable.prop('src', e.target.result).resizable({
maxHeight: 200,
maxWidth: 200,
minHeight: 20,
minWidth: 20,
});
}
reader.readAsDataURL(this.files[0]);
}
});
});
#draggable {
display: inline-block;
margin: 0px;
}
#resizable {
position: absolute;
cursor: move;
margin: 0px;
max-height: 200px;
max-width: 200px;
box-sizing: border-box;
border: none;
}
.test {
width: 300px;
height: 300px;
overflow: hidden;
background-color: beige;
}
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/cupertino/jquery-ui.css" rel="stylesheet" />
<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<input type='file' />
<div id='test' class='test'>
<div id='draggable' class="ui-widget-content">
<img id="resizable" class="ui-widget-content">
</div>
</div>
I am using cropit and I want to preview the cropped image in a modal. How do I get the src url of the cropped image
I copied the some parts of the basic html code for this plugin
HTML
<div class="image-editor">
<input type="file" class="cropit-image-input">
<div class="cropit-preview"></div>
<div class="image-size-label">
Resize image
</div>
<input type="range" class="cropit-image-zoom-input">
<button class="rotate-ccw">Rotate counterclockwise</button>
<button class="rotate-cw">Rotate clockwise</button>
<button class="export">Export</button>
</div>
JS
$(function() {
$('.image-editor').cropit({
imageState: {
src: 'http://lorempixel.com/500/400/',
},
});
$('.rotate-cw').click(function() {
$('.image-editor').cropit('rotateCW');
});
$('.rotate-ccw').click(function() {
$('.image-editor').cropit('rotateCCW');
});
$('.export').click(function() {
var imageData = $('.image-editor').cropit('export');
window.open(imageData);
});
});
What I tried so far was using from the documentation
$('.image-editor').cropit('imageSrc'); //but it returns null. Is there any other way to do this?
the demo and the documentation doesnt seem to blend so Im having a hard time using the plugin.
Just change this part. The imagedata is a usable base64 URL itself. It can't be open in a new window but you can easily set it as any image's src.
$('.export').click(function() {
var imageData = $('.image-editor').cropit('export');
$("#image").src = imageData;
});
Working Example
$(function() {
$('.image-editor').cropit({
exportZoom: 1.25,
imageBackground: true,
imageBackgroundBorderWidth: 50,
});
$('.export').click(function() {
var imageData = $('.image-editor').cropit('export');
document.querySelector("#image").src = imageData;
});
});
.image-editor {
text-align: center;
}
.cropit-preview {
background-color: #f8f8f8;
background-size: cover;
border: 5px solid #ccc;
border-radius: 3px;
margin-top: 7px;
width: 250px;
height: 250px;
display: inline-block;
}
.cropit-preview-image-container {
cursor: move;
}
.cropit-preview-background {
opacity: .2;
cursor: auto;
}
.image-size-label {
margin-top: 10px;
}
input, .export {
/* Use relative position to prevent from being covered by image background */
position: relative;
z-index: 10;
display: block;
}
button {
margin-top: 10px;
}
<script
src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropit/0.5.1/jquery.cropit.js"></script>
<div class="image-editor">
<input type="file" class="cropit-image-input">
<div class="cropit-preview"></div>
<input type="range" class="cropit-image-zoom-input">
<button class="export">Export</button>
</div>
<img id="image"/>
I am trying to implement drag and drop and browse files. I have a <div> with id #box and trying to trigger <input type="file" id="imageUpload" /> on click event of that <div>. The following code is working fine on Mozilla Firefox and Google Chrome but having problem on Microsoft Edge.
$(document).off().on('click', '#box', function () {
$('#imageUpload').trigger('click');
$('#imageUpload').off().on('change', function () {
var imageLoader = document.getElementById('imageUpload');
selectedFiles = imageLoader.files;
imageBrowseUploader(selectedFiles);
});
});
#box {
border: 1px dotted #0B85A1;
width: 100%;
height: 150px;
color: #92AAB0;
text-align: center;
font-weight: 500;
}
#imageUpload {
visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="box">
<b>Drag and drop or click here</b> to upload your image.
</div>
<input type="file" id="imageUpload" />
Here is the working Demo with minor changes! (As you can see)
$(document).ready(function(){
$(document).on('click', '#box', function () {
//debugger;
$('#imageUpload').trigger('click');
});
$(document).on('change', function () {
debugger;
var imageLoader = document.getElementById('imageUpload');
selectedFiles = imageLoader.files[0].name;
imageBrowseUploader(selectedFiles);
});
});
function imageBrowseUploader(selectedFiles)
{
alert(selectedFiles);
}
#box {
border: 1px dotted #0B85A1;
width: 100%;
height: 150px;
color: #92AAB0;
text-align: center;
font-weight: 500;
}
#imageUpload {
visibility: hidden;
}
<html>
<head>
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>
<div id="box">
<b>Drag and drop or click here</b> to upload your image.
</div>
<input type="file" id="imageUpload" />
</body>
</html>
Hope this will works for you! thank you :)
I would put the on change outside the click function, like this:
$(document).ready(function(){
$(document).off().on('click', '#box', function () {
$('#imageUpload').trigger('click');
});
$('#imageUpload').off().on('change', function () {
var imageLoader = document.getElementById('imageUpload');
selectedFiles = imageLoader.files;
imageBrowseUploader(selectedFiles);
});
});
#box {
border: 1px dotted #0B85A1;
width: 100%;
height: 150px;
color: #92AAB0;
text-align: center;
font-weight: 500;
}
#imageUpload {
visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="box">
<b>Drag and drop or click here</b> to upload your image.
</div>
<input type="file" id="imageUpload" />
$(document).off().on('click', '#box', function () {
$('#imageUpload').trigger('click');
$('#imageUpload').off().on('change', function () {
var imageLoader = document.getElementById('imageUpload');
selectedFiles = imageLoader.files;
imageBrowseUploader(selectedFiles);
});
});
#box {
border: 1px dotted #0B85A1;
width: 100%;
height: 150px;
color: #92AAB0;
text-align: center;
font-weight: 500;
}
#imageUpload {
visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="box">
<b>Drag and drop or click here</b> to upload your image.
</div>
<input type="file" id="imageUpload" />
Your above function contains event inside event.Please don't do that and initialize your change function inside document.ready function()
I am using EaselJS, and for some reason my canvas isn't showing the image as a background even though this is how tutorials do it. My HTML file is as so:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Requiescat in Pace</title>
...lots of .js imports for EaselJS
<script type="text/javascript" src="RIPwitheasel.js"></script>
<style>
canvas {
position: absolute;
left: 0;
right: 0;
top: 10%;
padding-left: 0;
padding-right: 0;
margin-left: auto;
margin-right: auto;
display: block;
width: 800px;
background: transparent;
}
</style>
<link rel="stylesheet" type="text/css" href="style_2.css">
</head>
<body onload="init()">
<font color = white>
<img alt = "full screen bg img" src = "images/backgrounds/pagebackground.jpg" id = "full-screen-background-image"/>
<div style="position: relative">
<h1 style="position: fixed; width:100%; text-align: center"> <strong> Requiescat In Pace </strong> </h1>
<p style = "text-align: center"> Prototype 1 </p>
</div>
<form action="" style = "position: fixed; top: 0; width: 100% text-align: center" >
<input type="button" value="Donate!!!">
</form>
<div style="position: relative">
<p style="position: fixed; bottom: 0; width:100%; text-align: center"> Credits: To be added</p>
</div>
<canvas id="gameCanvas" width="1000" height="736">
Your browser does not support canvas. Please try again with a different browser.
</canvas>
</font>
</body>
</html>
And my RIPwitheasel.js is this:
var stage;
function init()
{
var canvas = document.getElementById("gameCanvas");
stage = new createjs.Stage(canvas);
var background = new createjs.Bitmap("images/backgrounds/grass-tiled.png");
stage.addChild(background);
createjs.Ticker.setFPS(60);
stage.update();
}
function tick()
{
stage.update();
}
What is it that is incorrectly defined? All of the page displays correctly but the canvas doesn't display the image. I get zero run-time errors in the browser console for the js file.
EDIT: I just realized that if I use a .jpg file instead of a .png file it loads it. Why is this?
See this answer from CreateJS developer: https://stackoverflow.com/a/20682883/1996480
Here's how you could use PreloadJS to load your background:
var queue = new createjs.LoadQueue();
queue.on("complete", handleComplete, this);
queue.loadFile({id:"myBackground", src:"images/backgrounds/grass-tiled.png"});
function handleComplete() {
var image = queue.getResult("myBackground");
stage.addChild(image);
}