I am using Jcrop to crop images in my web-application. It works great on all browsers (IE9, FF, Chrome, Safari) except IE8. Specifically, 8.7.6 which ships with Windows 7.
I am using Jcrop v 0.9.9.
In Firefox where it works.I see a structure a DOM like
img id... "style="display:none"
div class="jcrop-holder" ......
.........................
img ........
div
Where as in IE 8.7.6, I see the DOM like
img id... "style="display:none"
----Blank-------
Basically, the jcrop-holder is not being injected into the DOM while original image is hidden just like other browsers.
Can you pls. shed some light on this? and If you know any workarounds for IE.
Your help is appreciated.
Javascript Code to attach jcrop to target image
function attachJcropToModal()
{
jQuery(function($)
{
$('#jcrop_target').Jcrop(
{
aspectRatio: '<%=defaultAspectRatioValue%>',
minSize: [0,0],
onChange: updateCoords,
onSelect: updateCoords
},
function ()
{
jcrop_api = this;
}
);
});
}
function updateCoords(c)
{
$('#w').val(Math.round(c.w*adjFactor));
$('#h').val(Math.round(c.h*adjFactor));
$('#x1').val(Math.round(c.x*adjFactor));
$('#y1').val(Math.round(c.y*adjFactor));
}
Html image display code
<div class="cropperContainer">
<table>
<tbody><tr>
<td class="main">
<img id="jcrop_target" src="<%=imgSourceURL%>"<%=overriddenImageWidthAttr%> alt="" />
</td>
</tr>
</tbody></table>
</div>
Your code looks good, just one thing! You shouldn't use '' around the aspectRatio decimal value.
Jcrop Demo works on IE8, right?
Maybe you should give Cropzoom a try. I used this in a commercial project and after some tweaks it works great for us in IE7+, FF and Safari, etc...
Related
class ProductComponent extends Component {
render() {
var url = 'http://via.placeholder.com/150x150';
return (
<div>
<figure><img src={url} alt=""/></figure>
<div className="prod-dtl">
<span><img src={canada_logo} alt=""/> Williamsburg tote bag iPhone America…</span>
<h3>$15.00 <em>$ 25.00</em></h3>
<button className="add-btn">+</button>
</div>
</div>
);
}}
Above is my code let's say i'm getting images from APIs.
I have used create-react-app for creating app, now problem is when i'm opening my project in web view it is showing properly.
But from chrome console when i choose device like nexus 6 or iphone 6 whatever any device. image url will converted from
http://via.placeholder.com/150x150 => http://via#2x.placeholder.com/150x150
Automatically please help with these i need image to be fix nothing to append.
I havn't find any solution so i came across pure jQuery string replace, Once page fully loaded will remove #2x and #3x from image src.
$(document).ready(function () {
setTimeout(function () {
$('body img').prop('src', function (_, src) {
src = src.replace(/#2x\./, '.'); // strip if it's already there
src = src.replace(/#3x\./, '.'); // strip if it's already there
return src.replace(/(\.\w+$)/, '$1');
});
}, 0);
});
Hope this will help someone needed. Peace out:)
This may come off as a bit newb-ish, but I don't really know how to approach this.
Can anyone recommend me a way of delivering and image from a flask backend, after being called by an angular $http.get call?
Brief example of what I am trying to do.
//javascript code
myApp.controller('MyCtrl', function($scope, $http){
$http.get('/get_image/').success(function(data){
$scope.image = data;
});
});
#flask back end
#app.route('/get_image/', methods= ['GET', 'POST'])
def serve_image():
image_binary = get_image_binary() #returns a .png in raw bytes
return image_binary
<!-- html -->
<html ng-app= "myApp">
<div ng-controller= "MyCtrl">
{{ image }}
</div>
</html>
So as you can see, I am attempting to serve a raw-byte .png image from the flask backend, to the frontend.
I've tried something like this
<html>
<img src= "/get_image/">
</html>
But the trouble is, 'get_image_binary' takes a while to run, and the page loads before the image is ready to be served. I want the image to load asyncronously to the page, only when it is ready.
Again, I am sure there are many ways to do this, probably something built into angular itself, but it is sort of difficult to phrase this into a google-able search.
Can't speak to the flask stuff, but below is some AngularJS code.
This directive won't replace the source attribute until after Angular manipulates the DOM and the browser renders (AngularJS : $evalAsync vs $timeout).
HTML:
<div ng-controller="MyController">
<img lazy-load ll-src="http://i.imgur.com/WwPPm0p.jpg" />
</div>
JS:
angular.module('myApp', [])
.controller('MyController', function($scope) {})
.directive('lazyLoad', function($timeout) {
return {
restrict:'A',
scope: {},
link: function(scope, elem, attrs) {
$timeout(function(){ elem.attr('src', attrs.llSrc) });
},
}
});
Same code in a working JSFiddle
I have a issue with html2canvas showing the screenshot in a canvas div.
Actually the picture will be show in
<div id="content"> </div>
But i like to show the code in my canvas
<div id="content">
<canvas id="myimage"> HERE I LIKE TO SHOW THE IMAGE</canvas>
</div>
In the inline javascript i can change the div container-id, but i dont know how to change the code to get the image in the canvas element.
<script type="text/javascript">var date=new Date();var message,timeoutTimer,timer;var proxyUrl="http://urlcanvas.appspot.com";function addRow(a,c,d){var b=$("<tr />").appendTo($(a));b.append($("<td />").css("font-weight","bold").text(c)).append($("<td />").text(d))}function throwMessage(b,a){window.clearTimeout(timeoutTimer);timeoutTimer=window.setTimeout(function(){message.fadeOut(function(){message.remove()})},a||2000);$(message).remove();message=$("<div />").html(b).css({margin:0,padding:10,background:"#000",opacity:0.7,position:"fixed",top:10,right:10,fontFamily:"Tahoma",color:"#fff",fontSize:12,borderRadius:12,width:"auto",height:"auto",textAlign:"center",textDecoration:"none"}).hide().fadeIn().appendTo("body")}$(function(){$("#recommended a").click(function(c){c.preventDefault();$("#url").val(this.href);$("button").click()});var a,b;$('input[type="button"]').click(function(){$(a.contentWindow).unbind("load");$(a).contents().find("body").html2canvas({canvasHeight:b.body.scrollHeight,canvasWidth:b.body.scrollWidth,logging:true})});$("#getscreenshot").click(function(d){d.preventDefault();$(this).prop("disabled",true);var c=$("#url").val();$("#contentx").append($("<img />").attr("src","loading.gif").css("margin-top",40));var f=document.createElement("a");f.href=c;$.ajax({data:{xhr2:false,url:f.href},url:proxyUrl,dataType:"jsonp",success:function(e){a=document.createElement("iframe");$(a).css({visibility:"hidden"}).width($(window).width()).height($(window).height());$("#contentx").append(a);b=a.contentWindow.document;b.open();$(a.contentWindow).load(function(){var g=$(a).contents().find("body"),h={onrendered:function(j){$("#contentx").empty().append(j);$("#getscreenshot").prop("disabled",false);$("base").attr("href","")},allowTaint:true,taintTest:false,flashcanvas:"src/flashcanvas.min.js"},i=html2canvas(g,h)});$("base").attr("href",f.protocol+"//"+f.hostname+"/"+f.pathname);e=e.replace("<head>","<head><base href='"+f.protocol+"//"+f.hostname+"/"+f.pathname+"' />");if($("#disablejs").prop("checked")){e=e.replace(/\<script/gi,"<!--<script");e=e.replace(/\<\/script\>/gi,"<\/script>-->")}b.write(e);b.close()}})})});</script>
Here is a good reference create screenshot of webpage using html2canvas (unable to initialize properly) Hope it will help.
If i understood well you need to append the canvas like this:
html2canvas(document.getElementById("content"), {
onrendered: function(canvas) {
document.getElementById("content").appendChild(canvas);
}
});
EDIT italics = more detailed explanation added to the question. Thanks.
I'm building a jQuery Mobile site which has a Gallery section.
The gallery has a series of thumbnails on the top of the screen.
Users click on the thumbnail to load in new content, that being a larger image, text, and potentially audio on some of them.
It's at this point that I'm not sure what to do: the way jQuery Mobile works, it's geared towards loading new pages, or views. But I just want to inject new content in a container on the current page.
To be clear, when the user clicks on another thumbnail, a new image replaces the content of the container with new content.
I have two questions:
I'm not sure how to structure the dynamic content. I was thinking i'd create an html file for each item, which as a rule always contains a title, information and sometimes, audio.
I'm not sure how to script this functionality in jQuery Mobile. It's obviously Ajax, but I'm not familiar with it yet, especially since jQuery Mobile has it's own methods in place already which seems to redefine behaviors in a way that's contradictory to this approach described here.
Here is a code explanation of what i'm trying to do:
<!-- Galleries -->
<div data-role="page" id="galleries">
<div data-role="content" role="main">
This is the Selection UI, if i click on thumb2.jpg, it'd
fill #content-holder with the whatever html is in content2.php
<div id="thumb-carousel">
<img src="thumb1.jpg">
<img src="thumb2.jpg">
<img src="thumb3.jpg">
<img src="thumb4.jpg">
<img src="thumb5.jpg">
<img src="thumb6.jpg">
<img src="thumb7.jpg">
<img src="thumb8.jpg">
<img src="thumb9.jpg">
</div>
<!-- This is the container, currently it's filled
with the kinda stuff i need to put in it. -->
<div id="content-holder">
<img src="myimage1.jpg"/>
<p>Artwork Title</p>
<p>Caption</p>
<audio>//mp3</audio>
</div>
</div>
</div>
//remember to use event delegation because you never know when the page will be in the DOM
$(document).delegate('#galleries', 'pageinit', function () {
//bind a `click` event handler to each thumbnail link
$('#thumb-carousel').children().bind('click', function () {
$.ajax({
url : $(this).attr('href'),
success : function (serverResponse) {
//select the container,
//then fade it out,
//change it's HTML to the response from the AJAX request,
//and fade it back in
$('#content-holder').fadeOut(500, function () {
$(this).html(serverResponse).fadeIn(500);
});
},
error : function (jqXHR, textStatus, errorThrown) {
//remember to handle errors so your page doesn't seem broken to the user
}
});
//prevent the default behavior of the link, which is to navigate to the `href` attribute
return false;
});
});
This expects your server-response to be valid HTML markup that is ready to inject into the DOM, meaning no <html> or <body> tags, just what you want to add to the DOM:
<img src="..." />
<span>TITLE</span>
<audio src="..."></audio>
Here are some docs for ya:
$.ajax(): http://api.jquery.com/jquery.ajax
.closest(): http://api.jquery.com/closest
.fadeIn(): http://api.jquery.com/fadein
I am using colorbox to AJAX some external HTML onto a page.
My client wants to print this content direct from the page, therefore i used a print CSS loaded into the head of the document with colorbox's onComplete event hook.
The content that is loaded is a raft of legacy tables with inline styles which i can't seem to overwrite with the print CSS and when i view by media type the layout looks broken.
I put this down to only retrieving a chunk of the HTML with jQuery .find() rather than the whole page.
Would it be best to use an iframe with colorbox and load the whole HTML document including header. I assume this would preserve the layout better rather than retrieving a chunk.
I am not sure how to print the iframe's content. When i tried it printed an extremely small snapshot of the whole page with the iframe in the middle.
Am a bit lost on this one.
The jQuery i am using is as follows:
$('table.pricing > tbody > tr > th > p.price_report > a').colorbox({
title: "Price report",
transition: "elastic",
innerWidth: "733px",
innerHeight: "699px",
opacity: "0.5",
onComplete:function(){
// Ajax call to content
// insert Print CSS into head of document
}
});
The print CSS that is loaded merely hides the body content and then displays everything under #colorbox.
Apologies all the proper code is at work.
1) I would suggest switching to the "inline" colorbox option (but you don't have to):
<script type="text/javascript">
$(document).ready(function(){
$(".pricing").colorbox({width:"733px", height:"699px", iframe:false, open:true, overlayClose:true, opacity:.5, initialWidth:"300px", initialHeight:"100px", transition:"elastic", speed:350, close:"Close", photo:false, inline:true, href:"#price_report"});
});
</script>
2) Now add your html including the javascript and code to write your printable area:
<div style='display: none'>
<div id='price_report' class='pricing'>
<script type="text/javascript">
//<!--
function ClickHereToPrint(){
try{
var oIframe = document.getElementById('ifrmPrint');
var oContent = document.getElementById('pricingPrintArea').innerHTML;
var oDoc = (oIframe.contentWindow || oIframe.contentDocument);
if (oDoc.document) oDoc = oDoc.document;
oDoc.write("<html><head><title>My Printable Pricing Report!</title>");
oDoc.write("<link rel='stylesheet' href='link-to-my-styles/style.css' type='text/css' />");
oDoc.write("</head></body><body onload='this.focus(); this.print();' style='text-align: left; font-size: 8pt; width: 432pt;'>");
oDoc.write("<h3>My Pricing Report</h3>");
oDoc.write(oContent + "</body></html>");
oDoc.close();
}
catch(e){
self.print();
}
}
//-->
</script>
<iframe id='ifrmPrint' src='#' style="width:0pt; height:0pt; border: none;"></iframe>
<div id="pricingPrintArea">
<div class="myreport">
<p>Hello, I am a pricing report!</p>
</div>
</div>
</div>
</div>
3) Now add the print button wherever you wish:
<div id="print_btn">
<a href="#" onclick="ClickHereToPrint();" style="cursor: pointer;">
<span class="print_btn">
Click Here To Print This Report!
</span>
</a>
</div>
Note, the blank iframe included is where the javascript will write your printable area. You will also notice in the javascript that you can add a stylesheet, inline styles, a page title and more!
Keep in mind, this process will work similar for the ajax version of the colorbox, but if you go the route of the ajax method, you will have to write the printable div and print iframe and print javascript directly to that external file.
Theoretically, anything inside the printable region div (in this example: pricingPrintArea) will print, so as-long-as you wrap that around whatever you want to print, it will do so.
Important tip: Printers all read a Web page differently so try not to rely too much on inline styles and pixel dimensions for your printable version. That is why it is a good idea to create a stylesheet specifically for the printable page.
Hopefully that answers your question. (btw, you should be able to get this method to work with the ajax method of colorbox, but I haven't tested it).