have v-group with image and lines on layer,stage like this:
<button #click="export"></button>
<v-layer ref="layer">
<v-group>
<v-image :config="configBackground"></v-image>
<v-line
v-for="line in lines"
:key="line.id"
:config="{
stroke: 'red',
points: line.points,
}"
/>
</v-group>
</v-layer>
in my function i try get dataurl from stage to save img:
export(e) {
//console.log(e.target.getStage())
let dataURL = e.target.toDataURL()
console.log(dataURL)
// this.download(dataURL, "img.png")
},
If i click button, i get e.target.toDataURL is not a function
How can i get dataURL to save image?
this work for me
let stage = vm.$refs.stage.getNode()
let dataURL = stage.toDataURL()
Related
I am trying to add my own images for a custom marker in vue2-google-maps without success.
I know this is a bug and when I add an :icon="{url:'../assets/my_image'}" in tag the marker disappears.
Has anyone managed to make it work?
You need to load the image in this case, like this:
:icon="{ url: require('../../assets/img/marker-a.png')}"
An example:
<GmapMarker
v-for="(m, index) in markers"
:key="index"
:ref="`marker${index}`"
:position="m.position"
:clickable="true"
:draggable="true"
:icon="{ url: require('../../assets/img/marker-a.png')}" />
Just in case if you like to scale the size of the custom marker to look better in retina screen:
in <template>
<GmapMarker
v-for="(m, index) in markers"
:key="index"
:ref="`marker${index}`"
:position="m.position"
:clickable="true"
:draggable="true"
:icon="markerOptions" />
in script
const mapMarker = require('~/assets/images/layout/map-marker.png');
data() {
return {
markerOptions: {
url: mapMarker,
size: {width: 60, height: 90, f: 'px', b: 'px',},
scaledSize: {width: 30, height: 45, f: 'px', b: 'px',},
},
};
},
I’ve created a graph with echarts and want to include it to a pdf by using jspdf. I found that one way to do so might be to use canvas, transfer the graph to an image and finally include the image to the pdf. However, I fail to transfer the graph to an image. Here comes the code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Balken</title>
<script src="echarts.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.debug.js"></script>
<div id="body">
<div id="chart"></div>
</div>
<!-- prepare a DOM container with width and height -->
<div id="main" style="width: 750px; height: 500px"></div>
<script type="text/javascript">
// based on prepared DOM, initialize echarts instance
var myChart = echarts.init(document.getElementById('main'));
// specify chart configuration item and data
var option = {
color: ['#3398DB'],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisTick: {
alignWithLabel: true
}
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: 'Salami',
type: 'bar',
barWidth: '60%',
data: [10, 52, 200, 334, 390, 330, 220]
}
]
};
// use configuration item and data specified to show chart
myChart.setOption(option);
var canvas = document.getElementById('main');
var dataURL = canvas.toDataURL();
//console.log(dataURL);
$('#exportButton').click(function () {
var pdf = new jsPDF();
pdf.addImage(dataURL, 'JPEG', 0, 0);
pdf.save('download.pdf');
});
</script>
<button id="exportButton" type="button">Export as PDF</button>
</body>
</html>
Any suggestions?
I needed this as well for a commercial product, so I did not give up until I found the solution.
You cannot use the ID of the chart to get the URL for the image, instead you need to search for the canvas.
($('canvas')[0]).toDataURL("image/png");
Notice the "[0]" means it will give your the first canvas, if you have more charts just do:
($('canvas')[0]).toDataURL("image/png");
($('canvas')[1]).toDataURL("image/png");
($('canvas')[2]).toDataURL("image/png");
3 Hours of searching and testing well spent :)
Enjoy!
I would use the toolbox, save as image:
.....
toolbox: {
feature: {
saveAsImage : {show: true}
}
}
.....
This option, among all the existing ones, will show you an icon to save the graphic as an image.
Quedaria así:
enter image description here
For more options with toolbox: http://echarts.baidu.com/echarts2/doc/option-en.html#title~toolbox
I hope it helps you.
You have to import "html2canvas" in order to make this work.
Html2canvas library will get the snapshot and that image should be written to the pdf with jspdf.
I have created a pen for this.
$("#exportButton").click(function(){
html2canvas($("#main"), {
onrendered: function(canvas) {
var dataURL=canvas.toDataURL('image/jpeg');
var pdf = new jsPDF();
pdf.addImage(dataURL, 'JPEG', 0, 0);
pdf.save("download.pdf");
}
});
});
Echart code:
<ReactEcharts
ref={(e) => {
this.echarts_react = e;
}}
option={option}
notMerge
lazyUpdate
/>
Function:
saveAsImage = (uri, name = 'undefine.jpeg') => {
var link = document.createElement('a');
link.download = name;
link.href = uri;
document.body.appendChild(link);
link.click();
};
saveAsPDF = (uri, name = 'undefine.pdf') => {
let height = echartsInstance.getHeight();
let width = echartsInstance.getWidth();
var doc = '';
if (width > height) {
doc = new jsPDF('l', 'mm', [width, height]);
} else {
doc = new jsPDF('p', 'mm', [height, width]);
}
doc.addImage(echartsInstance.getDataURL({ backgroundColor: '#fff' }), 'JPEG', 10, 10);
doc.save(name);
};
function call:
<li className="nav-item inline dropdown">
<span className="nav-link" data-toggle="dropdown">
<i className="fa fa-download" />
</span>
<div className="dropdown-menu dropdown-menu-scale pull-right">
<span
className="dropdown-item"
onClick={() =>
this.saveAsImage(this.echarts_react.getEchartsInstance().getDataURL({ backgroundColor: '#fff' }))
}>
Save as Image
</span>
<span
className="dropdown-item"
onClick={() =>
this.saveAsPDF(this.echarts_react.getEchartsInstance().getDataURL({ backgroundColor: '#fff' }))
}>
Save as PDF
</span>
</div>
</li>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.2.61/jspdf.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.5.0-beta1/html2canvas.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.5.0-beta1/html2canvas.svg.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/amstockchart/3.13.0/exporting/rgbcolor.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/canvg/1.5/canvg.min.js"></script>
<script type="text/javascript">
// $("#list1").on("click",function(){
$("#list1").click(function(){
$("#row").html(option);
var imgData;
var svgElements = $("#row").find('svg');
//replace all svgs with a temp canvas
svgElements.each(function() {
var canvas, xml;
// canvg doesn't cope very well with em font sizes so find the calculated size in pixels and replace it in the element.
$.each($(this).find('[style*=em]'), function(index, el) {
$(this).css('font-size', getStyle(el, 'font-size'));
});
canvas = document.createElement("canvas");
canvas.className = "screenShotTempCanvas";
//convert SVG into a XML string
xml = (new XMLSerializer()).serializeToString(this);
// Removing the name space as IE throws an error
xml = xml.replace(/xmlns=\"http:\/\/www\.w3\.org\/2000\/svg\"/, '');
//draw the SVG onto a canvas
canvg(canvas, xml);
$(canvas).insertAfter(this);
//hide the SVG element
////this.className = "tempHide";
$(this).attr('class', 'tempHide');
$(this).hide();
});
/* html2canvas($("#row"), {
onrendered: function(canvas) {
var imgData = canvas.toDataURL(
'image/png');
var doc = new jsPDF('p', 'mm');
doc.addImage(imgData, 'PNG', 10, 10);
doc.save('sample-file.pdf');
}
});*/
var imgData;
html2canvas($("#row"), {
useCORS: true,
'allowTaint': true,
onrendered: function (canvas) {
imgData = canvas.toDataURL(
'image/jpeg', 1.0);
canvaswidth1=canvas.width/2;
canvasheight1=canvas.height/4;
currentHeight = $("#row").height();
currentHeight2=currentHeight/2;
var imgWidth = 200;
var pageHeight = 260;
var imgHeight = canvas.height * imgWidth / canvas.width;
var heightLeft = imgHeight;
var doc = new jsPDF('p', 'm`enter code here`m','a4');
var position = 35;
doc.setFillColor(52,73,94);
doc.rect(5, 5, 200, 25, "F");
doc.setFontSize(40);
doc.setTextColor(255, 255, 255);
doc.text(80, 23, "Fitview");
doc.addImage(imgData, 'JPEG', 5, position, imgWidth, imgHeight);
heightLeft -= pageHeight;
while (heightLeft >= 0) {
position = heightLeft - imgHeight;
doc.addPage();
doc.addImage(imgData, 'JPEG', 5, position, imgWidth, imgHeight);
heightLeft -= pageHeight;
}
doc.save('healthcheck_Rapportage.pdf');
location.reload();
}
});
$("#row").find('.screenShotTempCanvas').remove();
$("#row").find('.tempHide').show().removeClass('tempHide');
});
</script>
index.xml
<Alloy>
<Window class="container">
</Window>
</Alloy>
index.js
function btnClickedHandler(e){
alert(nameTi.text);
alert($.index.nameTi);
}
function addContent(){
var showBtn = Ti.UI.createButton({
id: "showButton",
title:"Show Text",
top: 10,
});
var nameTi = Ti.UI.createTextField({
id:"displayText",
textFieldId: 'displayText',
width: 50
});
showBtn.addEventListener("click", btnClickedHandler);
$.index.add(nameTi);
$.index.add(showBtn);
}
$.index.open();
addContent();
Any suggestions to access dynamically added text input. One way could be definitely by storing instance in global variable. But can be done using id like $("#instanceId")
Try this:
function addContent(){
var showBtn = Ti.UI.createButton({
id: "showButton",
title:"Show Text",
top: 10,
});
var nameTi = Ti.UI.createTextField({
id:"displayText",
textFieldId: 'displayText',
width: 50
});
showBtn.addEventListener("click", function(){
alert(nameTi.text);
alert($.index.nameTi);
}
});
$.index.add(nameTi);
$.index.add(showBtn);
}
$.index.open();
addContent();
I have created a radio button from the following link, https://github.com/yozef/TiRadioButtonGroup. I am able to see the radio buttons but the respective radio button labels are not showing. How can we display the radio button labels.
My code:
View:
<Alloy>
<Window class="container">
<View id="radiopicker" ></View>
</Window>
</Alloy>
Style:
".container": {
backgroundColor:"red",
layout: 'vertical'
}
"#radiopicker":
{
width: '90%',
top: '25dp'
}
Controller:
(function() {
var radioButton = require('/ui/tiRadioButton');
var radioGroup2 = radioButton.createGroup({
groupId:1,
width:20,
height:150,
layout:'vertical',
radioItemsValue:['One', 'Two', 'Three'],
radioItemsPadding:10,
radioItemsBackgroundSelectedImage:'/radioButtonActive.png',
radioItemsBackgroundImage:'/radioButton.png',
radioItemsWidth:33,
radioItemsHeight:34
});
var button = Ti.UI.createButton({
title:'Get value'
});
button.addEventListener('singletap', function(e) {
alert("Vertical radioGroup selectedIdx: " + radioGroup2.selectedValue);
});
$.radiopicker.add(radioGroup2);
$.radiopicker.add(button);
})();
$.index.open();
Screenshot:
The label option one, two and three are not displaying. Please help me out of this issue. I need to display the labels too.
I've gone ahead and updated my Module which will give you the result you want... You can fetch it here:
https://github.com/yozef/TiRadioButtonGroup
I think you should put some label near to the radioButtons by yourself. Have a look at my modified code. It is not tested but should do the trick. Maybe you have to play around with the width/height/left etc attributes a bit.
(function() {
var radioButton = require('/ui/tiRadioButton');
var radioGroup2 = radioButton.createGroup({
groupId:1,
width:20,
height:150,
layout:'vertical',
radioItemsValue:['One', 'Two', 'Three'],
radioItemsPadding:10,
radioItemsBackgroundSelectedImage:'/radioButtonActive.png',
radioItemsBackgroundImage:'/radioButton.png',
radioItemsWidth:33,
radioItemsHeight:34
});
//Create a view to hold your labels
var labelsView = Ti.UI.createView({
height:150,
left: "30" //Or whereever you want to place it
layout:'vertical'
});
//Create the labels
var label1 = Ti.UI.createLabel({
text: "One",
height: "34",
width: Titanium.UI.SIZE
});
var label2 = Ti.UI.createLabel({
text: "Two",
height: "34",
width: Titanium.UI.SIZE
});
var label3 = Ti.UI.createLabel({
text: "Three",
height: "34",
width: Titanium.UI.SIZE
});
//Attach the labels to your view and your view to your radioPicker view
labelsView.add(label1);
labelsView.add(label2);
labelsView.add(label3);
$.radiopicker.add(labelsView);
var button = Ti.UI.createButton({
title:'Get value'
});
button.addEventListener('singletap', function(e) {
alert("Vertical radioGroup selectedIdx: " + radioGroup2.selectedValue);
});
$.radiopicker.add(radioGroup2);
$.radiopicker.add(button);
})();
$.index.open();
I have gone through your code and found that your window background color is set to 'white' or '#ffffff' and in tiRadioButton.js module label color is also set to 'white' or '#ffffff'. Hence you are not able to see the lable.
You can change either the window backgroundColor or label color.
For change windowBackground color :
at abc.tss file
".container": {
backgroundColor:"red", // any color you want
layout: 'vertical'
}
For change Label color :
at tiRadioButton.js file
var radioItemLabel = Ti.UI.createLabel({
width:Ti.UI.SIZE,
height:Ti.UI.SIZE,
text: arg.radioItemsValue[i],
font: {}, // Can add your own font styles
color:'#FFFFFF', //Label color
top:isVertical?null:5, // 5 padding between RadioBtn & Label
left:!isVertical?null:5, // 5 padding between RadioBtn & Label
id:i,
});
//**In color field you can change the label color **
I'm trying to use Magnific Popup in collaboration with elevateZoom, I have it working to a point where I have bound a click handler to the zoom container, which in this case is the .product-image-gallery div.
If I pass a single image src, e.g. $j('.product-image-gallery .gallery-image').attr('src'); as the src: argument then I get a popup with an image, but as soon as I pass a more general selector such as the .gallery-image on its own, i get a 'The image could not be loaded' message.
The aim is to have the popup let me cycle through all the avaliable product images.
HTML:
<div class="product-image-gallery">
<img id="image-main" class="gallery-image visible" src="example1.jpg" alt="Title" title="Title" />
<img id="image-0" class="gallery-image" src="example1.jpg" data-zoom-image="example1.jpg" />
<img id="image-1" class="gallery-image" src="example2.jpg" data-zoom-image="example2.jpg" />
<img id="image-2" class="gallery-image" src="example3.jpg" data-zoom-image="example3.jpg" />
</div>
JS ($j because jQuery is in noConflict mode):
$j.magnificPopup.open({
items: {
src: '.gallery-image',
type: 'image',
gallery: {
enabled: true
}
}
});
I ended up building an object then passing that to magnific-popup, my solution:
$j('.product-image-gallery').bind('click', function(){
galleryObj = [];
$j('.product-image-gallery .gallery-image').not('#image-main').each(function() {
var src = $j(this).data('zoom-image'),
type = 'image'; // it's always an image :)
image = {};
image ["src"] = src;
image ["type"] = type;
galleryObj.push(image);
});
// open the popup
$j.magnificPopup.open({
items: galleryObj,
gallery: {
enabled: true
},
});
});