Develop Reference

croppie.js blank image in returning result only on IPhone

Expected Behavior
with disabled 'enforceBoundary' and zooming out we want to have a small image and white spaces around it
Actual Behavior
after zooming out a little bit and hit crop button we have a full white image which is not what we expect
Steps to Reproduce the Problem
open codepen link below with Safari or chrome on IPhone :
click 'add' button
select an image from your gallery
Modal is open now. here is your selected picture in most very top of modal and a range slider below image
try zooming out using this range slider till you have some white spaces around the image
tap 'crop' button and you will see a fully white picture and your selected image is gone!
NOTE : Don't use android device. it's very ok on every android devices
Example Link
here is my HTML Code :
<div class="row AddItemImage">
<div class="remodal" data-remodal-id="cropImagePop" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="remodal-dialog">
<div class="remodal-content">
<div class="remodal-header">
<button data-remodal-action="close" class="remodal-close close"></button>
</div>
<div class="remodal-body">
<div id="upload-demo" class="center-block">
</div>
</div>
<div class="remodal-footer">
<button id="croppie-rotate" class="croppie-rotate btn DS-edit mt-0"><i class="icon-refresh"></i> rotate</button>
<button data-remodal-action="cancel" class="btn DS-remove mt-0">close</button>
<button data-remodal-action="confirm" id="cropImageBtn" class="btn DS-submit mt-0">crop</button>
</div>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6" data-image="image1">
<div class="product product-2">
<input type="file" class="item-img file center-block" id="file1" name="file1" style="display: none;" required />
<figure class="product-media">
<div style="position: relative;">
<img id="image1" data-input="file1" class="item-img-output product-image img-fluid w-100" src="https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_640.png" onerror="this.onerror=null; this.src='/Contents/images/def_product.png'" />
</div>
<div class="product-action product-action-dark">
<a data-input="file1" data-hidden="hiddenimage1" class="btn-product AddImage" title="add"><span>add</span></a>
</div>
</figure>
</div>
</div>
</div>
JS Code :
var InputID = '';
var hiddenInput = '';
var $uploadCrop,
tempFilename,
rawImg,
imageId;
function readFile(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$('.upload-demo').addClass('ready');
rawImg = e.target.result;
var inst = $('[data-remodal-id=cropImagePop]').remodal();
inst.open();
}
reader.readAsDataURL(input.files[0]);
} else {
swal("Sorry - you're browser doesn't support the FileReader API");
}
}
$uploadCrop = $('#upload-demo').croppie({
viewport: {
width: 300,
height: 300,
type: 'square'
},
boundary: {
width: '100%',
height: 400
},
enforceBoundary: false,
enableExif: true,
enableOrientation: true,
enableResize: false,
});
$('#croppie-rotate').on('click', function(ev) {
$uploadCrop.croppie('rotate', '90');
})
$(document).on('opening', '.remodal', function() {
// alert('Shown pop');
$uploadCrop.croppie('bind', {
url: rawImg,
orientation: 0
}).then(function() {
/*console.log('jQuery bind complete');*/
});
});
$('.item-img').on('change',
function() {
imageId = $(this).data('id');
tempFilename = $(this).val();
$('#cancelCropBtn').data('id', imageId);
readFile(this);
});
$('#cropImageBtn').on('click',
function(ev) {
$uploadCrop.croppie('result', {
type: 'base64',
format: 'jpeg',
quality: 0.7,
//size : 'original',
size: {
width: 1000,
height: 1000
},
backgroundColor: '#fff'
}).then(function(resp) {
$('.item-img-output[data-input=' + InputID + ']').attr('src', resp);
$('#' + hiddenInput).val(resp);
});
});
function add_image(input_id) {
$("#" + input_id).focus().trigger('click');
$("#" + input_id).unbind('click');
}
$('.AddImage').on('click',
function() {
InputID = $(this).data('input');
hiddenInput = $(this).data('hidden');
add_image(InputID);
$(this).closest('.product').find('#' + InputID).change(function() {
$(this).siblings('.product-media').find('.AddImage').click();
$(this).bind('click')
})
})
Specifications
Browser: Safari
Version: 14
I'm ready for discus about this problem and I will appreciate to anyone who can help me to fix this

JavaScript 3d Viewer using images with Rotation and Zoom

I am trying to develop interactive 3d viewer with Rotation and Zoom using Java script. I successfully developed a script to view product which rotates only in one axis(X-axis), but need script sample to view product which is taken in X,Y and Z axis. I have attached an image which shows camera placements.
Fig-1 Sample Camera placement
Fig -1 Shows camera positions where images are taken in single axis, This is achieved and below is the code.
<html>
<head>
<style type="text/css">
table img {
height: 250px;
width: 250px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
var arr = new Array();
var xCurrent = 0;
var currentImgPos = 0;
$("#dvImages img").each(function () {
arr.push($(this).attr("src"));
});
$("#product").attr("src", arr[0]);
$("#product").mouseleave(function () { xCurrent = 0; });
$("#product").mousemove(function (e) {
var parentOffset = $(this).parent().offset();
var relX = e.pageX - parentOffset.left;
var relY = e.pageY - parentOffset.top;
if (xCurrent > relX) {
if (relX - xCurrent <= -5) {
if (currentImgPos >= 25) {
currentImgPos = 0;
$("#product").attr("src", arr[currentImgPos]);
}
else {
currentImgPos = currentImgPos + 1;
$("#product").attr("src", arr[currentImgPos]);
}
xCurrent = relX;
}
}
else {
if (relX - xCurrent >= 5) {
if (currentImgPos <= 0) {
currentImgPos = 25;
$("#product").attr("src", arr[currentImgPos]);
}
else {
currentImgPos = currentImgPos - 1;
$("#product").attr("src", arr[currentImgPos]);
}
xCurrent = relX;
}
}
});
});
</script>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<img alt="" src="" id="product" />
</td>
</tr>
</table>
<div id="dvImages" style="display: none">
<img alt="" src="http://www.mathieusavard.info/threesixty/1.jpg" />
<img alt="" src="http://www.mathieusavard.info/threesixty/5.jpg" />
<img alt="" src="http://www.mathieusavard.info/threesixty/9.jpg" />
<img alt="" src="http://www.mathieusavard.info/threesixty/13.jpg" />
<img alt="" src="http://www.mathieusavard.info/threesixty/17.jpg" />
<img alt="" src="http://www.mathieusavard.info/threesixty/21.jpg" />
<img alt="" src="http://www.mathieusavard.info/threesixty/25.jpg" />
</div>
</body>
</html>
Fig-2 New Camera placement
Fig -2 Shows camera positions where images are taken in X,Y and Z axis. Need sample code this part

Remove thumbnails create from input js

That is my problem :
I have written javascript code to create a thumbnail when a user uploads an image. I would now like to add a feature which allows a user to click on an "X" which will then deleted the image.
this is my code :
var imageLoader = document.getElementById('fUpload2');
imageLoader.addEventListener('change', handleImage, false);
var canvas = document.getElementById('imageCanvas2');
var ctx = canvas.getContext('2d');
function handleImage(e){
var reader = new FileReader();
reader.onload = function(event){
var img = new Image();
img.onload = function(){
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img,0,0);
document.getElementById("imageCanvas2").style.height = canvas.height;
document.getElementById("imageCanvas2").style.maxWidth = "200px";
document.getElementById("imageCanvas2").style.maxHeight = "200px";
document.getElementById("imageCanvas2").style.border = "1px solid #000";
}
img.src = event.target.result;
var alte= canvas.height;
}
reader.readAsDataURL(e.target.files[0]);
}
.image-upload-gal > input {
display: none;
}
<div class="well">
<form class="form-horizontal" role="form" method="post" action="/ServiceUpload.php" enctype="multipart/form-data">
<div class="form-group" style="padding:14px;">
<div class="image-upload-gal" >
<label for="fUpload2">
Add foto
</label>
<input type="file" name="fUpload" id="fUpload2" />
<br>
<canvas id="imageCanvas2" ></canvas>
</div>
</div>
<button class="btn btn-primary pull-right" type="submit" value="f_upload" name="up" style="margin-top: -20px;">Submit Photo</button>
</form>
</div>
and that is another code ( i need 2 code is long story :D )
function handleFileSelect(evt) {
var files = evt.target.files; // FileList object
// Loop through the FileList and render image files as thumbnails.
for (var i = 0, f; f = files[i]; i++) {
// Only process image files.
if (!f.type.match('image.*')) {
continue;
}
var reader = new FileReader();
// Closure to capture the file information.
reader.onload = (function(theFile) {
return function(e) {
// Render thumbnail.
var span = document.createElement('span');
span.innerHTML = ['<img class="thumb" src="', e.target.result,
'" title="', escape(theFile.name), '"/>'].join('');
document.getElementById('list').insertBefore(span, null);
};
})(f);
// Read in the image file as a data URL.
reader.readAsDataURL(f);
}
}
document.getElementById('upload').addEventListener('change', handleFileSelect, false);
.thumb {
height: 180px;
border: 1px solid #000;
margin: 10px 5px 0 0;
}
input{
display:none;
}
<div class="image-upload" >
<label for="upload">
Add foto
</label>
<input type="file" id="upload" name="fUpload" />
<input type="hidden" name="up" value="f_upload" />
<output id="list"></output>
</div>
<button class="btn btn-primary pull-right" type="submit" value="newpost" name="NewPost" style="margin-top: -10px;">Submit</button>
</form>

just add an onclick event on a span containing a "x"
<span id="deleteImage">X</span>
Add the on Click handler then clear the canvas as you haven't saved the image anywhere else in that code
document.getElementById("deleteImage").onclick = function(){
canvas.clearRect(0, 0, canvas.width, canvas.height);
}
Edited.
if you want to clear the canvas directly below is how.
canvas = document.getElementById("imageCanvas2");
var ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, canvas.width, canvas.height);

Hyperlink downloads whatever that img src is

Alright i can't really seem to find anything regarding EXACTLY what i'm doing.
Anyways i need to set a hyperlink to download an image. That image has an id already.
Everytime the user displays an image, the download link will download that image they have entered.
When you run the code, enter 255812 for image code.
function myFunction() {
var x = document.getElementById("imagetxt").value;
var y = "http://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-" + x + ".jpg";
// Creating an image
var img = new Image();
// Defining the function if image loads successfully.
img.onload = function() {
document.getElementById("image1").src = y;
};
//Defining the function if image fails to load.
img.onerror = function() {
alert("Image not found");
};
img.src = y;
}
<body align="center">
<div>
<img src="http://i.imgur.com/dXo8Fxp.png" width="20%" height="20%">
</div>
<div>
<img src="http://i.imgur.com/jCOLCiU.png" width="8%" height="8%">
</div>
<div>
<input id="imagetxt" size="6" type="text" value="">
</div>
<div>
<input id="btn1" type="button" value="Display" onclick="myFunction()" style="top: 5px; position: relative;">
</div>
<div>
<img id="image1" src="" width="30%" height="30%" style="top: 10px; position: relative;">
</div>
DOWNLOAD THIS

Get rid of the onclick on the anchor tag
<a href="#" id="imageDL" download>DOWNLOAD THIS</a>
Set the anchor's href in the img.onload
img.onload = function() {
document.getElementById("image1").src = y;
document.getElementById("imageDL").href = y;
};

Add this to the end of myFunction
document.getElementById("imageDL").href = y;
function myFunction() {
var x = document.getElementById("imagetxt").value;
var y = "http://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-" + x + ".jpg";
// Creating an image
var img = new Image();
// Defining the function if image loads successfully.
img.onload = function() {
document.getElementById("image1").src = y;
};
//Defining the function if image fails to load.
img.onerror = function() {
alert("Image not found");
};
img.src = y;
document.getElementById("imageDL").href = y;
}
<body align="center">
<div>
<img src="http://i.imgur.com/dXo8Fxp.png" width="20%" height="20%">
</div>
<div>
<img src="http://i.imgur.com/jCOLCiU.png" width="8%" height="8%">
</div>
<div>
<input id="imagetxt" size="6" type="text" value="">
</div>
<div>
<input id="btn1" type="button" value="Display" onclick="myFunction()" style="top: 5px; position: relative;">
</div>
<div>
<img id="image1" src="" width="30%" height="30%" style="top: 10px; position: relative;">
</div>
DOWNLOAD THIS

Showing image in webpage using knockout binding

this is my html code
<div class="fileupload fileupload-new" data-provides="fileupload">
<div data-bind="if: imgSrc">
<div class="fileupload-new thumbnail" style="width: 150px; height: 150px;"></div>
</div>
<div data-bind="ifnot: imgSrc">
<div class="fileupload-new thumbnail" style="width: 150px; height: 150px;"><img src="${pageContext.request.contextPath}/resources/ui_resources/img/profile_pic.png" /></div>
</div>
<div class="fileupload-preview fileupload-exists thumbnail" style="max-width: 150px; max-height: 150px; line-height: 20px;"></div>
<div>
<span class="btn btn-file"><span class="fileupload-new">Select image</span><span class="fileupload-exists">Change</span><input type="file" data-bind=" file: imgFile, fileObjectURL: imgSrc"/></span>
Remove
</div>
</div>
and I am binding like
var Patientp = function () {
this.id = ko.observable(idValue);
this.name = ko.observable(nameValue);
this.address = ko.observable(addressValue);
this.gender = ko.observable(genderValue);
//this.consultant= ko.observableArray(consultantArrValue);
this.username = ko.observable(usernameValue);
this.password = ko.observable(passwordValue);
this.email = ko.observable(emailValue);
this.mobile = ko.observable(mobileValue);
this.imgFile = ko.observable(imgFileValue);
this.imgSrc = ko.observable(imgSrcValue);
this.imagePath=ko.observable(imagePathValue);
this.userid=ko.observable(useridValue);
//this.consultant= ko.observableArray(consultantArrValue);
this.consultant= ko.observable(consultantValue);
}
idValue = '4';
useridValue = '6';
nameValue = 'fri1';
addressValue = 'fri1';
genderValue = 'Male';
mobileValue = '1234567890';
//these fields are not available
usernameValue = 'fri1';
passwordValue = '';
emailValue = 'fri1#fri1.com';
imgFileValue = 'fri1';
imgSrcValue='http://socialtv.s3.amazonaws.com/EmzSqEmzSq.jpg'
//imgSrcValue = 'http://socialtv.s3.amazonaws.com/EmzSqEmzSq.jpg';
imagePathValue = 'fri1';
//consultantArrValue = null;//'fri1';
consultantValue="d1";
//var doc={};
var projectUrl=$('#projectUrl').val();
and this is the fiddle
The problem is the actual image is not showing the image area instead a blank div area is showing as shown in the screenshot
Can anybody please tell me how to show the image?

Do you mean that you want to add <img data-bind="attr: {'src': imgSrcValue}" /> inside thumbnail div, like:
<div data-bind="if: imgSrc">
<div class="fileupload-new thumbnail" style="width: 150px; height: 150px;">
<img data-bind="attr: {'src': imgSrcValue}" />
</div>
</div>

You are setting the src without using a binding, so it wont work properly.
You do it like this:
Js
var model = function () {
this.imgPath = ko.observable("http://jsfiddle.net/img/logo.png");
}
ko.applyBindings(model);
Html
<img data-bind="attr:{src: imgPath}"></img>
(Fiddle)